How to Speedup your Blogger with Image Lazy Load Script - Onet4u Tech
News Update

How to Speedup your Blogger with Image Lazy Load Script

How to Speedup your Blogger with Image Lazy Load Script
Also Read
Hello blogger, Today I will share simple tips on how to Speedup your Blogger with Image Lazy Load Script. This Tips work on all blog templates, This Tips will make your blog Loading fast.

How to Speedup your Blogger with Image Lazy Load Script

Why choose lazy loading pictures at all?

Lazy Loading defers the loading of a picture that's not required on the page in real time. a picture that's not visible to the user once the page masses, is loaded later once the user scrolls and therefore the image really come into view. If the user ne'er scrolls, a picture that's not visible to the user ne'er gets loaded.

1. Performance Improvement

The is that the most significant one for you as a web site administrator – higher performance and cargo time. With lazy loading, you're reducing the number of pictures that require to be loaded on the page at the start. Lesser resource requests mean lesser bytes to transfer and lesser competition for the restricted network information measure accessible to the user. This ensures that the device is ready to transfer and method the remaining resources abundant quicker. Hence, the page becomes usable abundant earlier compared to the case while not lazy loading.

2. value reduction

The second profit for you is in terms of delivery prices. Image delivery, or delivery of the other quality, is sometimes charged on the idea of the number of bytes transferred. As mentioned earlier, with lazy loading, if the image isn't visible, it ne'er get loaded. Thus, you scale back the overall bytes delivered on the page. particularly for users that bounce off the page or move solely with the highest portion of the page. This reduction in bytes transferred from your delivery network reduces delivery prices. this can become a lot of apparent as we have a tendency to explore lazy loading within the returning sections.

How to Install Lazy Load on your blogger?

Login to > Theme > Html Editor and find this code </body>.

Add this code before </body> code and save your template.

<script type='text/javascript'>

// 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:"",effect:"fadeIn",threshold:"0"})});

When done, save your template then refresh your blogger, Good luck.
DONATION Help give donations if the article feels useful. Donations will be used to extend the domain. thanks.



Load Comments

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel