adf.ly - shorten links and earn money!

Install Lazy Load in Blogger

If your blog or website containing many images, Lazy Load will be very helpful to you. It can reduce the page loading time of your site. Lazy loader is a jQuery plugin written in JavaScript. It delays loading of images in (long) web pages. Images outside of viewport (visible part of web page) wont be loaded before user scrolls to them. Using lazy load on long web pages containing many large images makes the page load faster. Browser will be in ready state after loading visible images. In some cases it can also help to reduce server load. Lazy Load is a famous plugin for wordpress blogger.


#Steps:
1. Go to Dashboard ->> Design ->>; Edit HTML

2. Search this code (Ctrl + F), </head>

3. Then, paste the code below, before </head>
&lt;script charset=&#39;utf-8&#39; src=&#39;http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js&#39; type=&#39;text/javascript&#39;/&gt;

&lt;script type=&#39;text/javascript&#39;&gt;
//&lt;![CDATA[

/*
 * Lazy Load - jQuery plugin for lazy loading images
 *
 * Copyright (c) 2007-2009 Mika Tuupola
 *
 * Licensed under the MIT license:
 *   http://www.opensource.org/licenses/mit-license.php
 *
 * Project home:
 *   http://www.appelsiini.net/projects/lazyload
 *
 * Version:  1.5.0
 *
 */
(function($) {

    $.fn.lazyload = function(options) {
        var settings = {
            threshold    : 0,
            failurelimit : 0,
            event        : &quot;scroll&quot;,
            effect       : &quot;show&quot;,
            container    : window
        };
              
        if(options) {
            $.extend(settings, options);
        }

        /* Fire one scroll event per scroll. Not one scroll event per image. */
        var elements = this;
        if (&quot;scroll&quot; == settings.event) {
            $(settings.container).bind(&quot;scroll&quot;, function(event) {
              
                var counter = 0;
                elements.each(function() {
                    if ($.abovethetop(this, settings) ||
                        $.leftofbegin(this, settings)) {
                            /* Nothing. */
                    } else if (!$.belowthefold(this, settings) &amp;&amp;
                        !$.rightoffold(this, settings)) {
                            $(this).trigger(&quot;appear&quot;);
                    } else {
                        if (counter   &gt; settings.failurelimit) {
                            return false;
                        }
                    }
                });
                /* Remove image from array so it is not looped next time. */
                var temp = $.grep(elements, function(element) {
                    return !element.loaded;
                });
                elements = $(temp);
            });
        }
      
        this.each(function() {
            var self = this;
          
            /* Save original only if it is not defined in HTML. */
            if (undefined == $(self).attr(&quot;original&quot;)) {
                $(self).attr(&quot;original&quot;, $(self).attr(&quot;src&quot;));   
            }

            if (&quot;scroll&quot; != settings.event ||
                    undefined == $(self).attr(&quot;src&quot;) ||
                    settings.placeholder == $(self).attr(&quot;src&quot;) ||
                    ($.abovethetop(self, settings) ||
                     $.leftofbegin(self, settings) ||
                     $.belowthefold(self, settings) ||
                     $.rightoffold(self, settings) )) {
                      
                if (settings.placeholder) {
                    $(self).attr(&quot;src&quot;, settings.placeholder);    
                } else {
                    $(self).removeAttr(&quot;src&quot;);
                }
                self.loaded = false;
            } else {
                self.loaded = true;
            }
          
            /* When appear is triggered load original image. */
            $(self).one(&quot;appear&quot;, function() {
                if (!this.loaded) {
                    $(&quot;&lt;img /&gt;&quot;)
                        .bind(&quot;load&quot;, function() {
                            $(self)
                                .hide()
                                .attr(&quot;src&quot;, $(self).attr(&quot;original&quot;))
                                [settings.effect](settings.effectspeed);
                            self.loaded = true;
                        })
                        .attr(&quot;src&quot;, $(self).attr(&quot;original&quot;));
                };
            });

            /* When wanted event is triggered load original image */
            /* by triggering appear.                              */
            if (&quot;scroll&quot; != settings.event) {
                $(self).bind(settings.event, function(event) {
                    if (!self.loaded) {
                        $(self).trigger(&quot;appear&quot;);
                    }
                });
            }
        });
      
        /* Force initial check if images should appear. */
        $(settings.container).trigger(settings.event);
      
        return this;

    };

    /* Convenience methods in jQuery namespace.           */
    /* Use as  $.belowthefold(element, {threshold : 100, container : window}) */

    $.belowthefold = function(element, settings) {
        if (settings.container === undefined || settings.container === window) {
            var fold = $(window).height()   $(window).scrollTop();
        } else {
            var fold = $(settings.container).offset().top   $(settings.container).height();
        }
        return fold &lt;= $(element).offset().top - settings.threshold;
    };
  
    $.rightoffold = function(element, settings) {
        if (settings.container === undefined || settings.container === window) {
            var fold = $(window).width()   $(window).scrollLeft();
        } else {
            var fold = $(settings.container).offset().left   $(settings.container).width();
        }
        return fold &lt;= $(element).offset().left - settings.threshold;
    };
      
    $.abovethetop = function(element, settings) {
        if (settings.container === undefined || settings.container === window) {
            var fold = $(window).scrollTop();
        } else {
            var fold = $(settings.container).offset().top;
        }
        return fold &gt;= $(element).offset().top   settings.threshold    $(element).height();
    };
  
    $.leftofbegin = function(element, settings) {
        if (settings.container === undefined || settings.container === window) {
            var fold = $(window).scrollLeft();
        } else {
            var fold = $(settings.container).offset().left;
        }
        return fold &gt;= $(element).offset().left   settings.threshold   $(element).width();
    };
    /* Custom selectors for your convenience.   */
    /* Use as $(&quot;img:below-the-fold&quot;).something() */

    $.extend($.expr[&#39;:&#39;], {
        &quot;below-the-fold&quot; : &quot;$.belowthefold(a, {threshold : 0, container: window})&quot;,
        &quot;above-the-fold&quot; : &quot;!$.belowthefold(a, {threshold : 0, container: window})&quot;,
        &quot;right-of-fold&quot;  : &quot;$.rightoffold(a, {threshold : 0, container: window})&quot;,
        &quot;left-of-fold&quot;   : &quot;!$.rightoffold(a, {threshold : 0, container: window})&quot;
    });
  
})(jQuery);

//]]&gt;
&lt;/script&gt;

&lt;script charset=&#39;utf-8&#39; type=&#39;text/javascript&#39;&gt;

$(function() {

   $(&amp;quot;img&amp;quot;).lazyload({placeholder : &amp;quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfRVXmTp5ikwn7UNLqsza79px1CvPaaHnoWQug0hQWqn3g3i69PehRyZBkwRa5HzN_HIdMQE80HLLbUgqa1WhqrFd3omj_g3NO0uYRtd9OnVZn7ZkH7F2Y6QHWEcnu8gPa-Crxckm7j1Y/s1600/grey.gif&amp;quot;,threshold : 200});

});

&lt;/script&gt;

4. Save your template.

Refresh your blog to see the result. Finish!

Enjoy boss!

1 comment:

  1. This is an amazingly open and personal and brave post, and I admire you so much for writing it.
    Accounts Software For Small Business

    ReplyDelete

Drop your comment. Ask or suggestion.

Join us on Faceboook Page too.