How to enable Lazy-loading images on Blogger website

OnTeque is the best platform for Mobile Reviews, Laptop Reviews, Tips & Tricks for Android, Windows, Blogger, WordPressGoogle AdSense, Google Analytics, SEO Optimization,  Software, mac, iOS Apple, YouTube, Facebook, WhatsApp, Instagram, twitter, How To type tech Question solution. Follow OnTeque for latest update.

How does lazy loading work?, What is lazy loading example?, Is lazy loading good?, What is lazy loading in website?
How to enable Lazy-loading images on Blogger website

  Follow Us  

Content

Here we are going to learn about How does lazy loading work?, What is lazy loading example?, Is lazy loading good?, What is lazy loading in website?

Lazy-loading Overview

What is lazy loading: Lazy loading is a process in which the google boat only crawls the content that is on the screen not all the content associated with that page. 

But it crawls the other contents as the user scrolls down to see the content of the bottom.

Enable Lazy-loading

To enable lazy loading in blogger follow the following steps 

Step 1: Go to Blogger dashboard. 

Step 2: Go to theme and click on down aero button next to customization. 

Step 3: Click on edit html. 

Step 4: Now press ctrl+f to find and type /body in search box in blogger html. 

Step 5: Copy the following code.

<script>//<![CDATA[// Lazy Load (function(a){a.fn.lazyload=function(b){var c={threshold:0,failurelimit:0,event:"scroll",effect:"show",container:window};if(b){a.extend(c,b)}var d=this;if("scroll"==c.event){a(c.container).bind("scroll",function(b){var e=0;d.each(function(){if(a.abovethetop(this,c)||a.leftofbegin(this,c)){}else if(!a.belowthefold(this,c)&&!a.rightoffold(this,c)){a(this).trigger("appear")}else{if(e++>c.failurelimit){return false}}});var f=a.grep(d,function(a){return!a.loaded});d=a(f)})}this.each(function(){var b=this;if(undefined==a(b).attr("original")){a(b).attr("original",a(b).attr("src"))}if("scroll"!=c.event||undefined==a(b).attr("src")||c.placeholder==a(b).attr("src")||a.abovethetop(b,c)||a.leftofbegin(b,c)||a.belowthefold(b,c)||a.rightoffold(b,c)){if(c.placeholder){a(b).attr("src",c.placeholder)}else{a(b).removeAttr("src")}b.loaded=false}else{b.loaded=true}a(b).one("appear",function(){if(!this.loaded){a("<img />").bind("load",function(){a(b).hide().attr("src",a(b).attr("original"))[c.effect](c.effectspeed);b.loaded=true}).attr("src",a(b).attr("original"))}});if("scroll"!=c.event){a(b).bind(c.event,function(c){if(!b.loaded){a(b).trigger("appear")}})}});a(c.container).trigger(c.event);return this};a.belowthefold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).height()+a(window).scrollTop()}else{var d=a(c.container).offset().top+a(c.container).height()}return d<=a(b).offset().top-c.threshold};a.rightoffold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).width()+a(window).scrollLeft()}else{var d=a(c.container).offset().left+a(c.container).width()}return d<=a(b).offset().left-c.threshold};a.abovethetop=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollTop()}else{var d=a(c.container).offset().top}return d>=a(b).offset().top+c.threshold+a(b).height()};a.leftofbegin=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollLeft()}else{var d=a(c.container).offset().left}return d>=a(b).offset().left+c.threshold+a(b).width()};a.extend(a.expr[":"],{"below-the-fold":"$.belowthefold(a, {threshold : 0, container: window})","above-the-fold":"!$.belowthefold(a, {threshold : 0, container: window})","right-of-fold":"$.rightoffold(a, {threshold : 0, container: window})","left-of-fold":"!$.rightoffold(a, {threshold : 0, container: window})"})})(jQuery);$(function(){$("img").lazyload({placeholder:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjchm56OiWbVr8U80sC8UYkW84-jrqUiO39cOmCasaIUfXWOMRNBAKpFbaM6VWuqHSu8ROimHdTtMS1HVxjlydBz7vaHPPFCI2-hTr5A4TtiucNBji-tcbrNacTu3oz-iSzYA6akr0qe3LB/s1/arlinadesign.gif",effect:"fadeIn",threshold:"-50"})});//]]></script>

Step 6: Paste this code just above the /body. 

Step 7: Save the theme.

Video Tutorial



Previous Post Next Post