20 TOP SECRET WHATSAPP TRICKS 2018

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 in 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

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;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRHVgV0obfEJzjW6vxKqgbW7h7AFrVrVWUv2SKOPn6ShPKkogFhsfYDdfOj9BFTior8qqng6TeL0e8gMJRaw6YIGRgtZjFZ3Px61c4RUo4nxWqBbIVMShzJO8ll6Ao2-s7sIZZb2BUT2A/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: 

20 TOP SECRET WHATSAPP TRICKS 2018