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

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

HOW TO GET APPROVED ON MAXBOUNTY EASILY | 2020 UPDATE

By
               Hello Guys, you might have heard about Maxbounty from your friends or somewhere on the web. Max Bounty is the leading player in Top CPA cost per action networks. So, if you can work on Maxbounty you can definitely earn a handsome amount of money. However, it is difficult to get approved by Maxbounty but not impossible.        Are you really excited to get approved on Maxbounty or are you searching web pages to find tips to get approved by Maxbounty then you are at the right place? Here, in this post, I will tell you how I got approved on Maxbounty. Thus on my personal experience with Maxbounty, I will share some tips with you that will help you to get easily approved on Maxbounty. Also Read:  TOP 5 CPA COST PER ACTION AFFILIATE NETWORKS 20 20       Before applying for Maxbounty, you need to learn some important things related to CPA marketing. Read the complete article...
4 comments
Read more

Proxima Centauri mystery deepens: We are on the brink of discovering aliens

By
Proxima Centauri, the closest star to our own Sun, has long been a subject of fascination for scientists and the general public alike. Located just 4.2 light years away, it has been the subject of numerous studies and observations over the years. Recently, however, the mystery surrounding Proxima Centauri has deepened even further, raising the question of whether we may be on the brink of discovering aliens. One of the most intriguing recent developments has been the discovery of an Earth-sized planet orbiting Proxima Centauri. Dubbed "Proxima b," this planet is located within the "habitable zone" of the star, meaning that it is possible that liquid water could exist on its surface. This has sparked speculation that the planet could potentially be home to some form of life. However, the mystery doesn't end there. In recent years, scientists have also detected strange bursts of radio waves emanating from Proxima Centauri. These bursts, known as "fast r...
Post a Comment
Read more