Apa Itu Lazy Load
Lazy Load adalah sebuah teknik yang membantu meningkatkan waktu muatan suatu halaman blog dan tetap menjaga stabilitas tampilan.
Mengapa harus Lazy Load
Karena dengan menggunakan Lazy Load! jika terdapat banyak file seperti gambar, video atau GIF maka lazy loading akan sangat membantu speed apabila pengunjung tersebut menggulir (scroll) halaman blog kita. Dengan menggunakan teknik ini blog kita akan memiliki performa yang lebih baik.
Script lazy load bisa kamu pasang pada blog kamu yang menggunakan blogspot dan untuk menggunakannya kamu bisa ikuti langkah-langkahnya di bawah ini :
- Buka dasboard blogger
- Masuk ke tema, edit HTML
- Selanjutnya tekan CTRL + F dan cari kode </body>
- Copy paste script lazy load dibawah ini
- Letakkan tepat di atas kode </body>
- Dan lihat hasilnya
<script
type='text/javascript'> //<![CDATA[
// Fast 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/AVvXsEiNlgC_Mc6FiKqoRcJDQyb7Koxi60qpJuflU8jO9UZLJptyIRtNlrJG-kogGVXfivi1Uq2LnAhyphenhyphenQiayAKqI9W8BCbM6moljS0v7BQkfmxOnHeGjpfwnJ4keZU0x4cez4nNI1l-vi95hEiQ/s1600/bisablog-loading.png",effect:"fadeIn",threshold:"-50"})});
//]]>
</script>
Jika ingin memeriksa dan melihatnya lazy load bekerja, pengujiannya melalui GTMetrik. Semoga Sukses. Baca Juga : Tips-jadi-konten-konten-abadi-
Komentar
Posting Komentar
SILAKAN KOMENTAR SESUAI TOPIK.....