OnTeque is the best platform for Mobile Reviews, Laptop Reviews, Tips & Tricks for Android, Windows, Blogger, WordPress, Google 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 to enable Lazy-loading images on Blogger website |
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.