How to add Lazyload Script in blogger

If you want to increase your blogger's blog speed so okay because in today's article, I will tell you how you can increase the speed of your blog by installing Lazy Load Plugin on your blog template.

How to add lazyload in blogger

What is Lazy Load Plugin?

A script that will delay file invocation before performing certain activities. To Lazy Load Blogger Image script. file calls will be delayed before any page scrolling activity occurs.

So, Blogism will provide tips on how to Delay Image Loading Before Scrolling the Page Delaying Loading Images Before Scrolling Pages here is when loading a page the image will not be loaded until we scroll the page and it will increase the speed of the blog. Let's know how you can install lazy load plugin in blogger

How to install the Lazy Load plugin in Blogger?

First, open  Blogger  > Click the Themes menu   > Click  Edit HTML  > Then find and add the code below before  </body>
Code 1

<script>
//<![CDATA[
// LazyLoad
function loadScript(d){var o=document.createElement("script");o.src=d,document.body.appendChild(o)}function downloadJSAtOnload(){loadScript("https://cdn.jsdelivr.net/gh/Arlina-Design/phantom@master/lazyarlinas.js")}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script>

For those friends who have already added the Lazysizes code, just replace the code with this version of

Code 2

<script>
//<![CDATA[
// Lazysizes
var lazysizer=!1;window.addEventListener("scroll",function(){(0!=document.documentElement.scrollTop&&!1===lazysizer||0!=document.body.scrollTop&&!1===lazysizer)&&(!function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://cdn.jsdelivr.net/gh/Arlina-Design/phantom@master/lazysarline.js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(e,a)}(),lazysizer=!0)},!0);
//]]>
</script>

You can choose or use any one code of them.

The application is almost the same as in the post about Lazysizes, you only need to find everything img in the theme. The code will look like this:

<img...

Example :

<img src='//www.blogger.com/img/icon_delete13.gif'/>

Add  class='lazy' for  Code 1  and  class='lazyload' for  Code 2  in the markup like this:

<img class='lazy' data-src='//www.blogger.com/img/icon_delete13.gif' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>

Change  src to  data-src and add  src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=' after  data-src

Or for this example:

<img expr:alt='data:post.title' expr:src='resizeImage(data:post.firstImageUrl, 280, &quot;300:200&quot;)' height='186' width='280'/>

So like this :

<img class='lazy' expr:alt='data:post.title' expr:data-src='resizeImage(data:post.firstImageUrl, 280, &quot;300:200&quot;)' height='186' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=' width='280'/>

Do the above for all the img markup   on the theme. What if the img markup already contains a class? Then you only need to add  lazy or  lazyload after the first class, for example:

<img class='blogger lazy' data-src='//www.blogger.com/img/icon_delete13.gif' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>

When finished, save the theme and see the results on your blog.

Okay, that's it from Blogism on  How to Delay Image Loading Before Scrolling the Page. Hopefully useful and greetings and if you facing problem with that then let me know in the comment section.