How to Install Lazy Load Automatically on the Blogger Platform Easily

What is lazy load image? Lazy load image is a feature or script used for the blogger platform that is not to display the image first before there is a reaction from the web visitor. And if you install a lazy load image, your blog will have a page speed that will increase after using it.

Usually lazy load is used on wordpress platforms but bloggers also don't want to lose because bloggers can also do what wordpress can. Now for those of you who want to install lazy load on your blog, you can follow the installation method here, no need to be complicated because installing it is also very easy. Here's a tutorial on how to install a lazy load image automatically in a blogger.

How to Install Auto Lazyload on the Latest Blogger (Full Page Script)

1. The step by step you have to do the following:
2. Enter the Blogger Dashboard
3. Find and click the Template menu
4. In the template menu, find and click Edit HTML and the theme will appear in the Edit Textarea column
5. Hover over the theme column, then press CTRL + F keyboard
6. In this phase, we will look for the code for laying the lazyload plugin by typing </body> then enter, then we will find the code </body> that is searched
7. Make sure the </body> code still has the cursor over the </body> code
8. Then copy and paste all the code below, place it directly above the code </body>,

   <script type="text/javascript">
   //<![CDATA[
   !function(t,e){"object"==typeof exports?module.exports=e(t):"function"==typeof define&&define.amd?define([],e(t)):t.LazyLoad=e(t)}("undefined"!=typeof global?global:this.window||this.global,function(t){"use strict";const e={src:"data-src",srcset:"data-srcset",selector:".lazyload"},r=function(){let t={},e=!1,s=0,o=arguments.length;"[object Boolean]"===Object.prototype.toString.call(arguments[0])&&(e=arguments[0],s++);let n=function(s){for(let o in s)Object.prototype.hasOwnProperty.call(s,o)&&(e&&"[object Object]"===Object.prototype.toString.call(s[o])?t[o]=r(!0,t[o],s[o]):t[o]=s[o])};for(;s<o;s++){n(arguments[s])}return t};function s(t,s){this.settings=r(e,s||{}),this.images=t||document.querySelectorAll(this.settings.selector),this.observer=null,this.init()}if(s.prototype={init:function(){if(!t.IntersectionObserver)return void this.loadImages();let e=this;this.observer=new IntersectionObserver(function(t){t.forEach(function(t){if(t.intersectionRatio>0){e.observer.unobserve(t.target);let r=t.target.getAttribute(e.settings.src),s=t.target.getAttribute(e.settings.srcset);"img"===t.target.tagName.toLowerCase()?(r&&(t.target.src=r),s&&(t.target.srcset=s)):t.target.style.backgroundImage="url("+r+")"}})},{root:null,rootMargin:"0px",threshold:[0]}),Array.prototype.forEach.call(this.images,function(t){e.observer.observe(t)})},loadAndDestroy:function(){this.settings&&(this.loadImages(),this.destroy())},loadImages:function(){if(!this.settings)return;let t=this;Array.prototype.forEach.call(this.images,function(e){let r=e.getAttribute(t.settings.src),s=e.getAttribute(t.settings.srcset);"img"===e.tagName.toLowerCase()?(r&&(e.src=r),s&&(e.srcset=s)):e.style.backgroundImage="url("+r+")"})},destroy:function(){this.settings&&(this.observer.disconnect(),this.settings=null)}},t.lazyload=function(t,e){return new s(t,e)},t.jQuery){const e=t.jQuery;e.fn.lazyload=function(t){return(t=t||{}).attribute=t.attribute||"data-src",new s(e.makeArray(this),t),this}}return s}); $('img').addClass('lazyload'); $("img").each(function() { var $this = $(this), src = $this.attr("src"); $this.attr( "data-src", src ); $this.removeAttr("src"); }); $('img').attr('src', "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheBYdr6isRNTOazwGBucaZ2IJN5N-_1fSAFt8tk57OesOaTNmlSkf6L_bgBIGGcOR8qAGHzC3MiY_pl2KKFseWb68QetdqKWUJh_dsZYkOtrltyVLvBHZBUz6n2ghe4ezbmkPEhyphenhyphen4K0fD2/s1600/Bars-1s-200px.gif"); window.addEventListener("scroll", function(event) { lazyload(); }); $(window).on('load', function () { $('img').each(function () { if (lazyload(this)) { $(this).attr('src', $(this).data('src')).removeAttr('data-src'); } }); });
   //]]>
   </script>

9. The final step is to save the template and see the results.

Information:

- To use this lazy load you have to use jquery version 2 and above.

- How this script works using addEventListener scroll with the original image scroll will appear

- Using a full page script where images on all pages will become Lazyload Script

That's how to install lazy load images automatically easily which I can share, well for those of you who want to make a tutorial request you can comment below or contact me directly, good luck trying and applying it,

Thank you...