Designed By: @anutrickz
Version: 1.0.2-beta

latest updated Jquery Lazy Load image for your blog

 

latest updated Jquery Lazy Load image for your blog

How To Install Jquery Lazy Load For BlogSpot Blogs? How To Optimize Blogger Blog For Faster Loading? How To 2x Your Blogger Blog Loading Speed? Do You want LazyLoad Plugin on your blog to increase your page speed metrics? I will show you the way to speedup a Blogger Blog by using the Lazy Load Script.

Lazy Load is a jQuery plugin that only loads Images seeable in the viewport (visible part of the web page) thereby enhancing the Page Load time. The images which are out of the initially visible region of the screen are loaded as the user scrolls through them. A really useful plugin for Image intensive Blog. This widget really decreases the 50% of blog load time as you check your own blog with GTmetrix. Let's see the working of this plugin.

How to Install this Plugin to Blogger?

  • Login to Blogger > Dashboard> Select the blog
  • Click on the “Template” Menu
  • Now Click on Edit HTML > Proceed
  • Click inside the blogger template editor and press Ctrl + F and search the code shown below.
</head>

  • Copy below css and paste above </head>

 <style>
      img.lazy{background: #fff linear-gradient(to right, #f6f6f6, #f1f1f1, #ececec, #f1f1f1, #f6f6f6); background-size: 150% 100%; animation-duration: .6s; animation-iteration-count: infinite; animation-name: placeHolderShimmer; animation-timing-function: ease-out; }
@keyframes placeHolderShimmer { from { background-position: 150% 0 } to { background-position: -150% 0 } } @-webkit-keyframes placeHolderShimmer { from { background-position: 150% 0 } to { background-position: -150% 0 } } @-moz-keyframes placeHolderShimmer { from { background-position: 150% 0 } to { background-position: -150% 0 } } @-webkit-keyframes fadeThis { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeThis { from { opacity: 0; } to { opacity: 1; } }
      </style>

  •  Copy below the javascript and paste above </body>

<script>

//<![CDATA[

document.addEventListener("DOMContentLoaded",function(){let lazyImages=[].slice.call(document.querySelectorAll("img.lazy"));let active=!1;const lazyLoad=function(){if(active===!1){active=!0;setTimeout(function(){lazyImages.forEach(function(lazyImage){if((lazyImage.getBoundingClientRect().top<=window.innerHeight&&lazyImage.getBoundingClientRect().bottom>=0)&&getComputedStyle(lazyImage).display!=="none"){lazyImage.src=lazyImage.dataset.src;lazyImage.classList.remove("lazy");lazyImages=lazyImages.filter(function(image){return image!==lazyImage});if(lazyImages.length===0){document.removeEventListener("scroll",lazyLoad);window.removeEventListener("resize",lazyLoad);window.removeEventListener("orientationchange",lazyLoad)}}});active=!1},1500)}};document.addEventListener("scroll",lazyLoad);window.addEventListener("resize",lazyLoad);window.addEventListener("orientationchange",lazyLoad)});

//]]></script>

 

  • Add image class='lazy fadeThis
  • replace src to data-src

 

  • More details follow video

Now just press on the save the template and refresh your blog.

Now just scroll your blog and see your images fade in with a lazy loading effect.


If you have any doubts regarding this post, Please ask it via comments, and Do not forget to share this post with your friends!!

contact us: