How to Delay Image Loading Before Scrolling Pages | Dn420

Welcome to the Dn420 blog today I am telling you about how to Deley Loading before scrolling pages/posts. One of the factors that contribute to the loading load on a blog is image content, here.

What is  Delay Image Loading Before Scrolling Pages/post?

Delay loading images before scrolling any page here is when loading a page the image will not load until we scroll any page and of course it will increase the speed of the blog definitely. that's why ib well shared a process like this here. How to Increase Blog Loading with LazySizes.

How to Delay Image Loading Before Scrolling Pages?

First, open Blogger Dashboard > then Click the Theme menu >then Click Edit HTML next to customize > Then find and past the code below before </body>

<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 of you who have already added the Lazysizes code, you need to replace the code with this version.

<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>

Choose any of the codes above

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

<img....

For example :

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

After that Add class='lazy' for Code 1 and class='lazyload'for Code 2 to the markup like this bellow:

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

Or 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 img markup in the theme. What if the img markup already contains a class? So you just 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 loading speed.

Demo

Next, to improve the Expires headers section that you can check on GTmetrix, you need to replace the s1600 and s640 on the image link in the post editor. Examples look like this:

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYwCNe3K2pPHOVCd4lMk9cAEt-CS7VbumsKrTQjsW45rdCjApZg58tAqkxbeGSO1gMvrxK47EE4MJERQih0zfTSta-at_Cs3cipUr4vvM9wGrchywJT6-8nZGK6pKxLUrOWsLLqq3w94gv/s1600/Cara+Memasang+Widget+Newsletter+di+Blogger.png" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Memasang Widget Newsletter di Blogger" class="lazyload" style="border: none;" data-original-height="800" data-original-width="1200" height="426" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYwCNe3K2pPHOVCd4lMk9cAEt-CS7VbumsKrTQjsW45rdCjApZg58tAqkxbeGSO1gMvrxK47EE4MJERQih0zfTSta-at_Cs3cipUr4vvM9wGrchywJT6-8nZGK6pKxLUrOWsLLqq3w94gv/s640/Cara+Memasang+Widget+Newsletter+di+Blogger.png" title="Cara Memasang Widget Newsletter di Blogger" width="640" /></a></div>

Add -rw in each post image

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYwCNe3K2pPHOVCd4lMk9cAEt-CS7VbumsKrTQjsW45rdCjApZg58tAqkxbeGSO1gMvrxK47EE4MJERQih0zfTSta-at_Cs3cipUr4vvM9wGrchywJT6-8nZGK6pKxLUrOWsLLqq3w94gv/s1600-rw/Cara+Memasang+Widget+Newsletter+di+Blogger.png" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Memasang Widget Newsletter di Blogger" class="lazyload" style="border: none;" data-original-height="800" data-original-width="1200" height="426" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYwCNe3K2pPHOVCd4lMk9cAEt-CS7VbumsKrTQjsW45rdCjApZg58tAqkxbeGSO1gMvrxK47EE4MJERQih0zfTSta-at_Cs3cipUr4vvM9wGrchywJT6-8nZGK6pKxLUrOWsLLqq3w94gv/s640-rw/Cara+Memasang+Widget+Newsletter+di+Blogger.png" title="Cara Memasang Widget Newsletter di Blogger" width="640" /></a></div>

Please note, if you added -rw in each post image. The image will not be read by third-party widgets such as Recent Posts, Random Posts, etc. Unless you readjust the third-party code to the new image format.

Okay, so from Dn420 on How to Delay Image Loading Before Scrolling Pages. Hopefully useful and important for every blogger.

Demo

CONCLUSION:

Thanks for reading this post for so long. If you have an opinion, don't forget to let us know in the comments. And if the post seems helpful, don't forget to heal your friends. Thanks.

Go to Link