gambar lazy load gambar

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.

Baca Juga :  Manfaat Backlink SEO Offpage Terbaik

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.

Baca Juga : Manfaat PKL (Prakerin)

Cara Memasang Script Lazy Load Gambar Di Blog

  1. Buka Blogger 
  1. Setelah Itu Buka Template/ Tema
  1. Setelah Itu Buka Edit Html
  1. 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>
  1. Simpan Template/Tema Dan Lihat Hasilnya
Baca Juga :  MagPro - Responsive News Magazine Template

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

Share This Post

Tinggalkan Komentar

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *