Cara Penggunaan Script Lazy Load di Blog

Baca Juga

Cara Penggunaan Script Lazy Load di Blog - Lazy Load adalah pola desain yang umumnya digunakan dalam pemrograman komputer untuk menunda inisialisasi objek sampai titik di mana diperlukan. Lazy Load ini berfungsi untuk menunda pemuatan gambar pada halaman web yang panjang. jadi, gambar akan dimuat ketika pengguna melakukan scrolling pada halaman tersebut. Menggunakan Lazy Load pada halaman blogger yang panjang akan membuat load halaman lebih cepat. Dalam beberapa kasus juga dapat membantu mengurangi beban server.

Jika anda menerapkan Lazy Load pada situs anda, silahkan bersihkan cache browser tersebih dahulu untuk melakukan pengujian lazy load.

Cara Menggunakan Lazy Load

Lazy Load merupakan bagian dari JQuery, Silahkan letakan pada akhir kode HTML

<script src="jquery.js"></script>
<script src="jquery.lazyload.js"></script>

Gunakan Class pada gambar yang ingin diterapkan Lazy Load

<img class="lazy" data-original="img/example.jpg" width="640" height="480">

$(function() {
    $("img.lazy").lazyload();
});

 Menerapkan Lazy Load di Blogger

1. Pada halaman utama Blogger, silahkan pilih "Tema" > "HTML"

2. Simpan kode dibawah ini sebelum kode </body>, kemudian "Simpan"

<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/AVvXsEhAe41SRQk43pKQa4XihszCjiBv7u6d96PcbxGzqo6mfvJMXzMdEYlGLG6LxRVDpgIGMRx0TOGSH5UmyIDBeKa3BVUDWMJdT9sVdFZeAEBmTCbQiY5ZnoLuMBccqrSaYmSJ2jrWyIsBqm6z/s640/arlinadesign.gif",effect:"fadeIn",threshold:"-50"})});
//]]>
</script>

Script Lazy Load ini dapat meringankan halaman artikel yang panjang terutama pada halaman artikel yang menampilkan banyak gambar. dengan Lazy Load ini, gambar akan hanya dimuat ketika pengunjung melakukan scroll ke bawah.

Saya rasa artikel Cara Penggunaan Script Lazy Load di Blog sudah cukup lengkap dan jelas. Semoga bermanfaat. Pertanyaan, kritik maupun saran silahkan tulis di kolom komentar, apabila dirasa bermanfaat silahkan share artikel ini ya? Tq

Subscribe to receive free email updates: