Cara Memasang Lazy Load Gambar Di Blog

Assalamualikum Wr Wb , Hallo Sobat. Pada artikel kali ini saya akan membagikan cara memasang lazy load gambar di blog ya .

Apa Itu Lazy Load ?

Lazy load adalah sebuah teknik yang memungkinkan membuat loading blog anda menjadi lebih cepat dengan cara menunda pemuatan resource yang tidak penting yang nantinya membuat loading blog menjadi lebih cepat pada pemuatan halaman.

Bagaimana Cara Kerja Lazy Load ?

Seperti yang di jelaskan diatas , Cara kerja lazy load yaitu menunda load sebuah resource yang tidak terlalu penting sehingga dapat membuat load sebuah halaman menjadi lebih cepat.

Apa Fungsi Lazy Load ?

Fungsi Lazy load adalah dapat membuat loading blog anda menjadi lebih cepat sehingga bisa membuat blog anda baik di mata google dan juga membuat pengunjung blog anda tidak perlu menunggu lama untuk bisa melihat blog anda .

Cara Memasang Lazy Load Gambar Di Blog

1. Buka Blogger 

2. Setelah Itu Buka Template/ Tema

3. Setelah Itu Buka Edit Html

4. Tambahkan Kode Di Bawah Ini Sebelum </body>

<script type='text/javascript'>
//<![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:"http://1.bp.blogspot.com/-Qg5bi1ZtDdM/VZ5nHAyYBqI/AAAAAAAAChE/exGnasO4oyk/s640/arlinadesign.gif",effect:"fadeIn",threshold:"-50"})});
//]]>
</script>

5. Simpan Template/Tema Dan Lihat Hasilnya

Akhir Kata

Oke gaes sekian dulu tutorial tentang Cara Memasang Lazy Load Gambar Di Blog kali ini jika ada kesalahan mohon di maafkan dan jangan lupa kritik dan sarannya agar saya bisa memperbaiki kesalahan kesalahan saya . Sekian dari Saya Wasssalamualaikum Wr Wb