Cara Memasang Lazy Load Di Blog Dengan Mudah

2 min read

Cara Memasang Lazy Load Di Blog Dengan Mudah
Cara Memasang Lazy Load


Cara Memasang Lazy Load Di Blog – Ada banyak sekali faktor yang mempengaruhi apakah sebuah blog akan berkembang baik kedepannya atau tidak. Mulai dari konten yang berkualitas, eksistensi si penulis, ide yang menarik, tampilan blog yang ramah bagi para user, dan termasuk salah satunya loading page yang lancar jaya. 

Meski tidak berpengaruh langsung pada optimasi search engine, loading halaman blog yang berat akan membuat kita kehilangan visitor yang semula berniat membaca di blog yang kita kelola. Kembalikan saja pada diri anda sendiri, apakah anda suka dengan blog yang lambat saat memuat? 
Oleh karena itu, pada kesempatan yang singkat ini, kita akan membahas mengenai cara memasang lazy load di blog dengan mudah. Yang dimana fungsi dari script lazy load ini adalah untuk meringankan loading halaman website yang kita kelola. Dari pada banyak basa basi langsung saja simak pembahasan dibawah ini.

Cara Memasang Lazy Load Di Blog Dengan Mudah

1. Copy script lazy load dibawah ini

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

2. Masuk kedalam dashboard blogger Tema Edit HTML


3. Cari kode </body> atau &lt;/body&gt; (gunakan CTRL + F) untuk pencarian lebih cepat.

4. Setelah ketemu kode </body> atau &lt;/body&gt; , Paste Script Lazy Load yang sudah kita copy, tepat diatas kode </body> atau &lt;/body&gt;


5. Langkah terakhir, Simpan. Dan lihat hasilnya.

Itulah tutorial singkat dan mudah dari kita mengenai cara memasang lazy load di blog. Semoga bermanfaat.

Judul : Cara Memasang Lazy Load Di Blog Dengan Mudah
Penulis : Admin
Tanggal : 16 Februari 2019
Hari : Sabtu
Di : Kota Medan

Cara Membuat Pop Up Card Unik

Cara Membuat Pop Up Card Unik Di Blog Cara Membuat Pop Up Card Unik – Halo sobat blogger balik lagi di watpedia. Seperti biasa,...
admin
2 min read

Cara Menonaktifkan Inspect Element Di Blog

Cara Menonaktifkan Inspect Elemen Di Blog Cara Menonaktifkan Inspect Elemen Di Blog Balik lagi di watpedia. Sebuah situs kecil suka suka berbagi tips /...
admin
1 min read

Tinggalkan Balasan

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