Stylish Delay Image Loading on Blogger.

#Stylish Delay Image Loading Before Scroll Down Pages in Blogger.

One of the factors that contribute to the loading load on a blog is image content, here CNL OFFICIAL will provide tips on How to add stylish delay loading images before scrolling the page on Blogger in 2021.

#What is Stylish Delay Image Loading on Blogger?

Delaying Image Loading 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 Blogger.

#Stylish Delay Image Loading Before Scrolling Pages

First, open Blogger > Click the Themes menu > Click Edit HTML and Backup Your Template> 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 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>

Select one of the codes above

The application is almost the same as in the post about Lazysizes, you only need to find everything imgin 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 to 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.

DEMO

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

<div class="separator" style="clear: both; text-align: center;">

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOQzyWJ7sVC1Pf_PgilDoeXAtNY-2FJ_cDrupHdeXRERIDRVc8sXJ7yYg0o10G5tHgE1K091reUYzK7lb8IQP86N4sfjsJc9fnlsrDDlImGkK4vT8zePTbARWUU_9izyChvcWOQS0lfQQM/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/AVvXsEhOQzyWJ7sVC1Pf_PgilDoeXAtNY-2FJ_cDrupHdeXRERIDRVc8sXJ7yYg0o10G5tHgE1K091reUYzK7lb8IQP86N4sfjsJc9fnlsrDDlImGkK4vT8zePTbARWUU_9izyChvcWOQS0lfQQM/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/AVvXsEhOQzyWJ7sVC1Pf_PgilDoeXAtNY-2FJ_cDrupHdeXRERIDRVc8sXJ7yYg0o10G5tHgE1K091reUYzK7lb8IQP86N4sfjsJc9fnlsrDDlImGkK4vT8zePTbARWUU_9izyChvcWOQS0lfQQM/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/AVvXsEhOQzyWJ7sVC1Pf_PgilDoeXAtNY-2FJ_cDrupHdeXRERIDRVc8sXJ7yYg0o10G5tHgE1K091reUYzK7lb8IQP86N4sfjsJc9fnlsrDDlImGkK4vT8zePTbARWUU_9izyChvcWOQS0lfQQM/s640-rw/Cara+Memasang+Widget+Newsletter+di+Blogger.png" title="Cara Memasang Widget Newsletter di Blogger" width="640" /></a></div>

Please note, if my friend has added -rw in each post image. The image will not be read by 3rd party widgets such as Recent Post, Random Post widget, etc. Unless you readjust the third party code with the new image format.

Okay, that's it from CNL OFFICIAL on Stylish Delay Image Loading Before Scrolling the Page . Hopefully useful and greetings.