Delay image Loading on blogger.
How to Delay Image Loading Before Scrolling Pages in Blogger Free.||Increase Blog Load speed with LazySizes Code.
Today, I am going to share with a Best Blogger Widgets(Delay Image Loading Before Scrolling Pages)
One of the factors that contribute to the loading load on a blog is image content, here Blog Plugin Free will provide tips on how to Delay Image Loading Before Scrolling the Page.
What is Delay Image Loading Before Scrolling the page ?(In Blogger)
Delaying Loading Images Before Scrolling Pages here is when loading a page the image will not be too loaded until we scroll the page and it will increase the speed of the blog. And it give to user a better experience. While You Scrolling Page or Post on blogger you will see that image in the Template take few second, That is Delay Image Loading Before Scrolling Pages.
Before implement code in your own website please see its benefit.
Benefit of Delay Image Loading Before Scrolling Pages in Blogger.
- Make Your Post stylish
- Increase Speed of Your Website
- Magical look and better experiences
- Users Friendly and Increas Blog Load
- Make Your Post stylish
- Increase Speed of Your Website
- Magical look and better experiences
- Users Friendly and Increas Blog Load
Note:All code provided by Arlina Code . All Code are Responsive and Users Friendly.
Now, You know benefit of Delay Image Loading Before Scrolling Pages. If you think to implement a Code into your website, I have shared a process like this here React lazy load images on scroll pages.
How to Delay Image Loading Before Scrolling Pages(In Blogger)
Please !, Follow the below steps Carefully otherwise Blog Plugin Free not take responsibility while any damage in your website.
First, open Blogger 》Click the Themes menu and Backup themes 》 than Click Edit HTML 》 And find and add the code below before </body
1st Code
<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 a new version of Lazy Sizes Code.
Sec Code
//<![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 one of the codes from above
The application is almost the same as in the post about Lazy sizes . 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 to the markup like this:
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, "300:200")' height='186' width='280'/>
So like this :
<img class='lazy' expr:alt='data:post.title' expr:data-src='resizeImage(data:post.firstImageUrl, 280, "300:200")' height='186' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=' width='280'/>
Do the above for all the images markup on the theme. What if the IMG markup already contains a class? Then you only need to add lazy or lazy load 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.
When finished, save the theme and see the results on your blog.
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/AVvXsEj01aDU5XcplUv_XYG3CLp4tTC6LIUPvAEGQvOKpb3c5oAaVeaY9n2arWUJkEQ4u6z7x5eQwwbCEwEFS1Xuwr2liEG2RLb0qAnHRWfBZL8HBOS-bpDNzd1xCEw49_KKG5dauO4_v8oJeIOt/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/AVvXsEj01aDU5XcplUv_XYG3CLp4tTC6LIUPvAEGQvOKpb3c5oAaVeaY9n2arWUJkEQ4u6z7x5eQwwbCEwEFS1Xuwr2liEG2RLb0qAnHRWfBZL8HBOS-bpDNzd1xCEw49_KKG5dauO4_v8oJeIOt/s640/Cara+Memasang+Widget+Newsletter+di+Blogger.png" title="Cara Memasang Widget Newsletter di Blogger" width="640" /></a></div>
Add -rwin each post image
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj01aDU5XcplUv_XYG3CLp4tTC6LIUPvAEGQvOKpb3c5oAaVeaY9n2arWUJkEQ4u6z7x5eQwwbCEwEFS1Xuwr2liEG2RLb0qAnHRWfBZL8HBOS-bpDNzd1xCEw49_KKG5dauO4_v8oJeIOt/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/AVvXsEj01aDU5XcplUv_XYG3CLp4tTC6LIUPvAEGQvOKpb3c5oAaVeaY9n2arWUJkEQ4u6z7x5eQwwbCEwEFS1Xuwr2liEG2RLb0qAnHRWfBZL8HBOS-bpDNzd1xCEw49_KKG5dauO4_v8oJeIOt/s640-rw/Cara+Memasang+Widget+Newsletter+di+Blogger.png" title="Cara Memasang Widget Newsletter di Blogger" width="640" /></a></div>
Please note, and if my friend has added -rwin each post image. The image will not be to read by 3rd party widgets such as Recent Post, Random Post widget, etc. Unless you adjust the third party code with the new image format.
Okay, that's it from Blog Plugin Free on How to Delay Image Loading Before Scrolling the Page. Hope You like this post for more Blogger Plugin or Widgets Subscribe our Newsletter.
If you have any problems on implement Code fill free to contact or comment us. We are ready to help you.
Thanks..