jQuery Lazy Load Plugin

jQuery Lazy Load Plugin

jQuery Lazy Load Plugin - Ada banyak faktor kenapa lalu lintas blog kehilangan pengunjung, salah satunya adalah kecepatan loading blog yang memerlukan waktu lama. Hal seperti ini benar-benar akan berdampak buruk buat blog Anda, jadi penting buat Anda untuk  memperhatikan beban dari template blog Anda.
Salah satu yang membuat blog kita loading lebih lama karena gambar atau photo,  lantas apa kita tidak harus menggunakan gambar untuk blog kita? Tentu saja tidak, seharusnya kita harus mengambil suatu langkah  tertentu sehingga beban dari blog kita berkurang dan tampil lebih cepat.

Nah, pada posting ini saya akan berbagi satu tips untuk mempercepat loading blog Anda dengan menggunanakan Plugin jQuery Lazy Image Load.  Cara kerja plugin ini adalah memperlambat atau menunda loading gambar di blog Anda. Gambar yang muncul hanya pada halaman yang terlihat dan  gambar yang lain akan terlihat saat kita mengscroll halaman blog ke bawah. Dengan begitu loading blog akan lebih cepat dan dalam beberapa kasus  tertentu dapat membantu mengurangi beban server. Untuk lebih jelasnya silahkan kunjungi Appelsiini.

Cara Install

• Login  ke Blogger Anda
• Klik Temlate > pilih Edit HTML
• Cari tag </body> gunakan Ctrl+F untuk mencari
• Selanjutnya copy javascript dibawah ini tepat sebelum tag </body>

  <script type='text/javascript'>
// Lazy Load
(function(a){a.fn.lazyload=function(b){var c={threshold:0,failurelimit:0,event:&quot;scroll&quot;,effect:&quot;show&quot;,container:window};if(b){a.extend(c,b)}var d=this;if(&quot;scroll&quot;==c.event){a(c.container).bind(&quot;scroll&quot;,function(b){var e=0;d.each(function(){if(a.abovethetop(this,c)||a.leftofbegin(this,c)){}else if(!a.belowthefold(this,c)&amp;&amp;!a.rightoffold(this,c)){a(this).trigger(&quot;appear&quot;)}else{if(e++&gt;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(&quot;original&quot;)){a(b).attr(&quot;original&quot;,a(b).attr(&quot;src&quot;))}if(&quot;scroll&quot;!=c.event||undefined==a(b).attr(&quot;src&quot;)||c.placeholder==a(b).attr(&quot;src&quot;)||a.abovethetop(b,c)||a.leftofbegin(b,c)||a.belowthefold(b,c)||a.rightoffold(b,c)){if(c.placeholder){a(b).attr(&quot;src&quot;,c.placeholder)}else{a(b).removeAttr(&quot;src&quot;)}b.loaded=false}else{b.loaded=true}a(b).one(&quot;appear&quot;,function(){if(!this.loaded){a(&quot;&lt;img /&gt;&quot;).bind(&quot;load&quot;,function(){a(b).hide().attr(&quot;src&quot;,a(b).attr(&quot;original&quot;))[c.effect](c.effectspeed);b.loaded=true}).attr(&quot;src&quot;,a(b).attr(&quot;original&quot;))}});if(&quot;scroll&quot;!=c.event){a(b).bind(c.event,function(c){if(!b.loaded){a(b).trigger(&quot;appear&quot;)}})}});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&lt;=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&lt;=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&gt;=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&gt;=a(b).offset().left+c.threshold+a(b).width()};a.extend(a.expr[&quot;:&quot;],{&quot;below-the-fold&quot;:&quot;$.belowthefold(a, {threshold : 0, container: window})&quot;,&quot;above-the-fold&quot;:&quot;!$.belowthefold(a, {threshold : 0, container: window})&quot;,&quot;right-of-fold&quot;:&quot;$.rightoffold(a, {threshold : 0, container: window})&quot;,&quot;left-of-fold&quot;:&quot;!$.rightoffold(a, {threshold : 0, container: window})&quot;})})(jQuery);$(function(){$(&quot;img&quot;).lazyload({placeholder:&quot;http://lh3.googleusercontent.com/-zHnkxten8GA/VLVnvI-NQ6I/AAAAAAAACKQ/LBebtyv343o/s0-U-I/gond3s.com.gif&quot;,effect:&quot;fadeIn&quot;,threshold:&quot;-50&quot;})});
//]]
</script> 

• Langkah terakhir klik Simpan template - selesai !

Bagaimana? Cukup mudah bukan cara menerapkan jQuery Lazy Load Plugin ini. Sekian untuk artikel kali ini, Jika anda memiliki masalah atau sebuah pertanyaan. Silahkan ajukan saja disini, saya Siap membantu. Semoga bermanfaat, Sampai Jumpa. :)