Lazy Load Images on Website or blog
M.Muzammil

Lazy Load Images on Website or blog

By M.Muzammil | February 02, 2023

How to 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.

Advantages of Lazy Loading Images:

There are several advantages to using lazy loading for images, including

  1. Faster page load times: By only loading images that are immediately visible to the user, lazy loading can significantly decrease the amount of data that needs to be transferred, resulting in faster page load times.
  2. Reduced data usage: Lazy loading can also reduce the amount of data that a user needs to download, which can be especially beneficial for users on mobile devices or with limited data plans.
  3. Improved user experience: By loading images as the user scrolls, lazy loading can provide a smoother user experience, as the page doesn't need to wait for all images to load before it can be displayed.
  4. Better search engine optimization: Lazy loading can help to improve the user experience, which can lead to better search engine rankings.
  5. Increased conversions: faster loading pages can lead to increased conversions and better user engagement, as users are more likely to stick around and interact with the site if it loads quickly.
  6. Reduced server load: Lazy loading can also help to reduce the load on the server, as it doesn't need to send all images at once.

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>
  5. To Search anything in blogger Press Ctrl + F and type or paste the term to search in the search bar.
  6. Now copy the code provided below and paste it just above the tag which we have founded in step 4.
  7. <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://lh3.googleusercontent.com/-fmX66IzCqrs/XFKVdJY4JZI/AAAAAAAAAjY/uqON7yBHrkUxE7Ca_TPfj6jWt5hUigU7ACLcBGAs/Rolling-1s-200px.gif", effect: "fadeIn", threshold: "0", effectTime: "2000" });
        });
        //]]>
    </script>
    In the above code just replace the highlighted image URL with your own image.
  8. 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.

Related Posts

M.Muzammil
M.Muzammil

I am a web Designer & Graphics Designer. I love to program and design. Sharing knowledge is my passion & Programming is my Hobby. Want Help? Contact Me its free.!

Be The First To Comment