Skip to main content

How To Add JQuery Lazy Load Plugin to Blogger| 2020 Update

By

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
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;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: 
 


Labels:
Location: United Kingdom

Comments

Post a Comment

Do Not Add HTML links to your comment. Otherwise, your comment won't be approved.

Popular posts from this blog

NASA's Shocking Discovery: Alien Planet Found 3 Days Ago, Cover-Up Revealed

By
For decades, conspiracy theorists and UFO enthusiasts have claimed that NASA has been hiding the truth about extraterrestrial life and the existence of alien planets. These claims have often been dismissed as mere speculation, but recent developments suggest that there may be more to the story than we previously thought. According to sources within NASA, the agency has recently made a groundbreaking discovery of an alien planet located in a distant solar system. The planet, which is said to be inhabited by intelligent alien beings, was discovered just three days ago by NASA scientists using state-of-the-art telescopes and other astronomical equipment. However, instead of announcing the discovery to the public, NASA has decided to keep the information under wraps and hide it from the world. This decision has sparked outrage and disbelief among many scientists, researchers and members of the public who believe that the discovery of an alien planet is a matter of global importance a...
Post a Comment
Read more

Stranger Things S4 All Episodes Free download

By
If you get Redirected to any other website after clicking the download link then there is another download link available in comment section or you can simply try below link and when you get Redirected to another website simply hit back button and click it again untill the link opens in telegram Click here to download
1 comment
Read more

JUST-IN: NASA Detects Radio Signal from Proxima Centauri

By
Scientists studying archival data collected by the Parkes radio telescope in Australia say they have found a radio signal that came from the direction of Proxima Centauri, the closest star to Earth. Proxima Centauri has at least one planet that may be habitable to life as we know it. There is a slim chance that the signal came from extraterrestrial beings, though other explanations are far more likely. Extraordinary claims require extraordinary evidence, and no one—including the astronomers analyzing the data—are claiming they’ve found aliens. A paper analyzing the findings is not expected to be published until early 2021, so there’s a lot we don’t know. But as is often the case with exciting science results, the news leaked early:  The Guardian   broke the story  on 18 December, the scientists involved  spoke publicly to  Scientific American , and experts at the SETI Institute  have   reacted . Finding life beyond Earth  is one of The Planetary S...
Post a Comment
Read more