Cara Memasang Script Lazy Load Gambar Di Blog


 Cara Memasang Script Lazy Load Gambar Di Blog - Assalamualaikum Wr Wb, Hallo sobat Rendy pada kesempatan kali ini saya akan memberikan tutorial tentang cara memasang script lazy load gambar di blog ya gan sebelum masuk ke pembahasan berikutnya mari kita cari tahu terlebih dahulu Apa Itu Lazy Load? Bagaimana Cara Kerjanya ? Dan Apa Fungsi Lazy Load Untuk Blog Kita?



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.

Baca Juga : Cara Riset Keyword Terbukti Ampuh Untuk Blog

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 Script 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

Baca Juga : Cara Membuat Sitemap SEO Di Blog Yang keren Dan Ringan

Akhir Kata
Oke gaes sekian dulu tutorial 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

#cara memasang lazy load gambar#cara memasang lazy load#cara memasang lazy load yang mudah#cara memasang lazy load gambar yang mudah#apa itu lazy load#cara memasang lazy load di blog#fungsi lazy load

0 Response to "Cara Memasang Script Lazy Load Gambar Di Blog"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel