script lazy load gambar untuk mempercepat loading blogger

script lazy load gambar untuk mempercepat loading blogger

Assalamualaikum selamat pagi teman perampokgoogle.com apakabar hari ini ? Semoga selalu sehat dan diberikan akomodasi untuk melaksanakan acara hari ini ya, Pagi ini aku ingin membuatkan sedikit tips mempercepat loading blogger menggunakan script lazy load bagi kau yang masih mengalami persoalan dengan loading blog yang berat atau lelet nggak ada salah nya ne kau terapin sedikit tips ini di blogger kamu.

Baca juga : cara mempercepat loading page blogger terbaru

Lazy load gambar digunakan untuk mengoptimalkan proses loading dikala membuka gambar yang ada dipostingan kamu, Jika kau menggunakan Wordpress kamu tidak akan direpotkan lagi dengan persoalan ini, Karena di wordpress sendiri ada beberapa opsi yang mampu kau gunain untuk mengoptimalkan loading blog atau web kamu.

Baca juga : Cara mudah mempercepat loading wordpress tanpa ribet

Untuk blog yang besar menyerupai labnol , shoutmeloud dan lain nya mereka menggunakan CDN untuk mengoptimalkan loading blog nya, Nah bagi kita yang menggunakan blogger jangan berkecil hati alasannya masih ada secercah keinginan untuk mengatasi persoalan pada loading blog kita.

Bagaimana cara memasang script lazy load gambar pada blogger ?

Langkah pemasangan :

#1. Login ke dashboard blogger kau https://www.blogger.com
#2. Klik menu theme, template atau tema lalu klik edit HTML
#3. silahkan kau cari arahan </head> lalu letakanlah script lazy load image dibawah ini sempurna diatas nya.

(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:" " target="_blank">