Breaking

Monday, 23 April 2018

How To Add JQuery Lazy Load Plugin to Blogger

DELAY IMAGE LOADING

Have you ever landed on a site where text loaded before images or images loaded as you hovered over them? Do You want this (LazyLoad Plugin) on your blog to increase your page speed metrics? If yes, well you are at the right place. In this post, I will explain to you how to add JQuery Lazy Load Plugin to your blog or any other website easily. 



Certainly, if you have a blog or a website containing a lot of images, then this trick will turn very useful for you. It can reduce page loading speed for your blogger blog, thus can reduce bounce rate and higher ranking in the search engines. You can check out more details about the JQuery Lazy Load Plugin by following the link.



Also Read: HOW TO INSERT CODEBOX IN BLOGGER POST


How To Add JQuery Lazy Load Plugin to Blogger



Also Read: Top 2 ways to add meta keywords to each blogger post
What is JQuery Lazy Load Plugin:
Lazy Loder is a JQuery Plugin written in JavaScript. LazyLoad JQuery Plugin delays loading of images in web pages. Images outside the visible part of the web page (viewport) won't be loaded unless user scrolls over them. While using JQuery Lazyload plugin on web page consisting of a large number of images, page load become fast. It also reduces server load in most of the cases. 

Also Read: How to add download button in blogger post without coding

So, visitors wouldn/t have to wait for the page loading as the page will be loaded faster. This eventually can decrease bounce rate. Also if you want higher ranking in search engines like Google then page speed is the first thing to do with. 




Procedure:

1. Login to your blogger Dashboard and then go to theme and then edit HTML. 


2. Scroll down until you get </head> or just type Cntrl + F and then type </head>. 



3. Copy the code given below and paste it above the </head>

<script charset='utf-8' src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
//<![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        : "scroll",
            effect       : "show",
            container    : window
        };
             
        if(options) {
            $.extend(settings, options);
        }

        /* Fire one scroll event per scroll. Not one scroll event per image. */
        var elements = this;
        if ("scroll" == settings.event) {
            $(settings.container).bind("scroll", function(event) {
             
                var counter = 0;
                elements.each(function() {
                    if ($.abovethetop(this, settings) ||
                        $.leftofbegin(this, settings)) {
                            /* Nothing. */
                    } else if (!$.belowthefold(this, settings) &&
                        !$.rightoffold(this, settings)) {
                            $(this).trigger("appear");
                    } else {
                        if (counter++ > 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("original")) {
                $(self).attr("original", $(self).attr("src")); 
            }

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

            /* When wanted event is triggered load original image */
            /* by triggering appear.                              */
            if ("scroll" != settings.event) {
                $(self).bind(settings.event, function(event) {
                    if (!self.loaded) {
                        $(self).trigger("appear");
                    }
                });
            }
        });
     
        /* 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 <= $(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 <= $(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 >= $(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 >= $(element).offset().left + settings.threshold + $(element).width();
    };
    /* Custom selectors for your convenience.   */
    /* Use as $("img:below-the-fold").something() */

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

//]]>
</script>

<script charset='utf-8' type='text/javascript'>

$(function() {

   $(&quot;img&quot;).lazyload({placeholder : &quot;http://4.bp.blogspot.com/-wRaPvE0Jqrs/USIW4erewNI/AAAAAAAAFNk/TXDOtgYUGlc/s1600/grey.gif&quot;,threshold : 200});

});

</script>


4. Now, save your template and all you want is done. Just go to your site and refresh it to see live results




Thanks for getting into the tutorial. I hope after wrapping up the tutorial, you would have learnt what is "JQuery LazyLoad Plugin", "How To Add JQuery Lazy Load Plugin to Blogger".
Also Read: 

3 comments:

  1. This comment has been removed by a blog administrator.

    ReplyDelete
  2. You know your projects stand out of the herd. There is something special about them. It seems to me all of them are really brilliant! best backlinks

    ReplyDelete
  3. This is an awesome post. Really very informative and creative contents. This concept is a good way to enhance knowledge. I like it and help me to development very well. Thank you for this brief explanation and very nice information. Well, got good knowledge.
    WordPress development company in Chennai

    ReplyDelete

Pages