Cara Terbaru Memasang Lazy Load di Blogger

Infoterlengkap.com - orang blogger juga harus memperhatikan kesehatan blog yang dikelolanya, memperhatikan kesehatan blog dengan cara terus mengoptimalkan kinernjanya agar tampilan, loading dan konten terus berkembang menjadi lebih baik.

Mengoptimalkan loading blog memang menjadi masalah yang selalu dihadapi oleh para blogger, terutama blogger yang menggunakan flatform blogspot, mungkin tidak menjadi begitu masalah bagi mereka yang menggunakan flatform wordpress dengan self host, karena banyak plug in yang bisa diinstall untuk mengoptimalkan loading blog agar selalu cepat meski banyak file dan gambar yang terunggah didalamnya.

Lalu bagaimana untuk blogger dengan flatform blogspot? apakah bisa mengoptimalkan loading blog agar lebih cepat seperti wordpress? jawabanya sangat bisa, karena pada kesempatan kali ini saya akan memberikan tutorial cara memasang plug in lazy load.

Lalu apa itu lazy load? Lazy load adalah sebuah plug in atau script yang dibangun dan dikembangkan khusus untuk flatform blogspot, Fungsinya untuk menunda pemanggilan objek ketika objek masih belum dibutuhkan. Dengan kata lain, gambar, video, dan komponen lain yang ada dalam blog tidak akan dimuat sebelum anda menyentuh atau mengarahkan kepada konten tersebut.

Sehingga dengan ini, loading blog akan sedikit berkurang karena hanya memuat halaman yang terbuka saja, ketika anda scroll cursor anda ke bawah, baru disini semua halaman akan dimuat secara keseluruhan.

Tentunya jika blog anda semakin cepat untuk diakses semakin berpotensi untuk menarik perhatian visitor karena blog tidak membutuhkan waktu yang lama untuk memuat seluruh halaman, sehingga para pengunjung pun akan semakin betah berselancar di blog anda.

Saya kira anda sudah mengerti apa itu lazy load dan bagaimana lazy laod berfungsi dalam blog, lalu sekarang bagaimana cara memasangnya di blog? sangat mudah, anda hanya perlu untuk memasang script yang akan saya bagikan dibawah ini didalam HTML blog anda. Carannya berikut ini:

Cara Terbaru Memasang Lazy Load  Di Blog

1. Silahkan  masuk ke Blog>theme>edit HTML.

2. copy dan paste kode dibawah ini diatas kode </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:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9KE7Cj_oNcGwPNlp49acEbAnPG2VI20hNDe7Djqxm01DRfHu62YhZzNDhJIMHUU5qoLpfdMU-LB0EZ3oO_CXXanbblYKljwkO60DMHXRAUX_MfMD9ZMC_Ag5TCNjiszh6jKyQHr84DyK-/s640/arlinadesign.gif",effect:"fadeIn",threshold:"-50"})}); //]]> </script>

3. save.

Sampai disini anda sudah berhasil memasang lazy load di blog anda, sekarang anda tinggal melihat dan rasakan hasilnya dengan cara buka halaman blog anda lalu scroll ke bawah, maka gambar akan di muat hanya ketika anda scroll kursor anda ke bawah.

itulah demikian cara terbaru untuk memasang lazy load di blogger dengan mudah, jika anda kurang paham dengan tutorial di atas, anda bisa menanyakan di kolom komentar. 

Advertisement