Lazy Load Images on Website or blog

Lazy loading is a technique used to delay the loading of images until the user scrolls to them. This can improve page load time and reduce the amount of data transferred to the user.

When a user visits a website, only the images that are visible on the screen are loaded, and as the user scrolls down, the remaining images are loaded as they come into view. This technique is particularly useful for pages with many images or long pages with images below the fold.

I have already posted on my website how you can lazy load AdSense ads it's very easy to lazy load AdSense ads like lazy loading images.

If you are having too many images on your website then you have to use this plugin because this will help you a lot.

Steps to Add Lazy Loading Functionality:

1. Go To Blogger Dashboard
2. Then Go to Theme / Template
3. Click Edit HTML Button
4. Now search for </head>

To Search anything in blogger Press Ctrl + F and type or paste the term to search in the search bar.

5. Now copy the code provided below and paste it just above the tag which we have founded in step 4.

<script>
//<![CDATA[
    (function (a) {
        a.fn.lazyload = function (b) {
            var c = { threshold: 0, failurelimit: 0, event: "scroll", effect: "show", container: window };
            if (b) {
                a.extend(c, b);
            }
            var d = this;
            if ("scroll" == c.event) {
                a(c.container).bind("scroll", function (b) {
                    var e = 0;
                    d.each(function () {
                        if (a.abovethetop(this, c) || a.leftofbegin(this, c)) {
                        } else if (!a.belowthefold(this, c) && !a.rightoffold(this, c)) {
                            a(this).trigger("appear");
                        } else {
                            if (e++ > c.failurelimit) {
                                return false;
                            }
                        }
                    });
                    var f = a.grep(d, function (a) {
                        return !a.loaded;
                    });
                    d = a(f);
                });
            }
            this.each(function () {
                var b = this;
                if (undefined == a(b).attr("original")) {
                    a(b).attr("original", a(b).attr("src"));
                }
                if ("scroll" != c.event || undefined == a(b).attr("src") || c.placeholder == a(b).attr("src") || a.abovethetop(b, c) || a.leftofbegin(b, c) || a.belowthefold(b, c) || a.rightoffold(b, c)) {
                    if (c.placeholder) {
                        a(b).attr("src", c.placeholder);
                    } else {
                        a(b).removeAttr("src");
                    }
                    b.loaded = false;
                } else {
                    b.loaded = true;
                }
                a(b).one("appear", function () {
                    if (!this.loaded) {
                        a("<img />")
                            .bind("load", function () {
                                a(b).hide().attr("src", a(b).attr("original"))[c.effect](c.effectspeed);
                                b.loaded = true;
                            })
                            .attr("src", a(b).attr("original"));
                    }
                });
                if ("scroll" != c.event) {
                    a(b).bind(c.event, function (c) {
                        if (!b.loaded) {
                            a(b).trigger("appear");
                        }
                    });
                }
            });
            a(c.container).trigger(c.event);
            return this;
        };
        a.belowthefold = function (b, c) {
            if (c.container === undefined || c.container === window) {
                var d = a(window).height() + a(window).scrollTop();
            } else {
                var d = a(c.container).offset().top + a(c.container).height();
            }
            return d <= a(b).offset().top - c.threshold;
        };
        a.rightoffold = function (b, c) {
            if (c.container === undefined || c.container === window) {
                var d = a(window).width() + a(window).scrollLeft();
            } else {
                var d = a(c.container).offset().left + a(c.container).width();
            }
            return d <= a(b).offset().left - c.threshold;
        };
        a.abovethetop = function (b, c) {
            if (c.container === undefined || c.container === window) {
                var d = a(window).scrollTop();
            } else {
                var d = a(c.container).offset().top;
            }
            return d >= a(b).offset().top + c.threshold + a(b).height();
        };
        a.leftofbegin = function (b, c) {
            if (c.container === undefined || c.container === window) {
                var d = a(window).scrollLeft();
            } else {
                var d = a(c.container).offset().left;
            }
            return d >= a(b).offset().left + c.threshold + a(b).width();
        };
        a.extend(a.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);
    $(function () {
        $("img").lazyload({ placeholder: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZjpTg-dNridJOiGuYMln16joQLrV46OcSfh0DALuY7MJ0as5jdqIh4NS-xvb9uUjm1G1EeALmJHmqP3Y6U0v5xBNJW6-gR95n2TCjxmY_uMyf8CFrXxEBhVn6-kM_T48fapVAZyULbLrP/", effect: "fadeIn", threshold: "0", effectTime: "2000" });
    });
    //]]>
</script>

In the above code just replace the highlighted image URL with your own image.

6. Save Theme / Template.

Conclusion:

You are all done and you have just added functionality of Lazy loading images in your blogger blog it is very much helpful to rank your site high in Google by decreasing your website page load time and I hope this tutorial helps.