Cara Memasang Lazy Load Di Blog Dengan Mudah

Cara Memasang Lazy Load Di Blog Dengan Mudah


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 jangan lupa bagikan ke teman-teman anda  baca juga artikel tutorial-tutorial dengan menu tutorial blogger di atas semoga bermanfaat. tarima kasih.

Baca juga : Cara Daftar Dan Memasang Google Analytics Di Blogger

 

Leave a Comment