Cara Memasang Script Lazy Load Di Blogger

Rabu, 09 Februari 2011

Lazy Load ialah contoh desain yang umumnya dipakai dalam pemrograman komputer untuk menunda inisialisasi objek hingga titik di mana diperlukan. Lazy Load ini berfungsi untuk menunda pemuatan gambar pada halaman web yang panjang. jadi, gambar akan dimuat dikala pengguna melaksanakan scrolling pada halaman tersebut. Menggunakan Lazy Load pada halaman blogger yang panjang akan menciptakan load halaman lebih cepat. Dalam beberapa perkara juga sanggup membantu mengurangi beban server.

Contoh halaman yang memakai Lazy Load pada Blogger. silahkan klik disini
Jika kau menerapkan Lazy Load pada situs kamu, silahkan bersihkan cache browser tersebih dahulu untuk melaksanakan pengujian lazy load.

Cara Menggunakan Lazy Load

Lazy Load merupakan bab dari JQuery, Silahkan letakan pada simpulan aba-aba 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 aba-aba dibawah ini sebelum kode </body>, lalu "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/AVvXsEhsH4l-UjvMGuTXy3irhfkdbr2UrnX-pJtbriV5p8idMVYYu9RAoOjymoUDrsXWgtUGyUXXyZyZfV18VQF1dOMNSDQB2a8Mt3_yWaj3OdlvzTmoW8jtduMujLQZIE2heIChrqOox4yo3RxN/s640/arlinadesign.gif",effect:"fadeIn",threshold:"-50"})}); //]]> </script>

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

Sekian mengenai Cara Memasang Script Lazy Load di Blogger supaya bermanfaat untuk kamu. terimakasih dan selamat mencoba.

referensi: arlinadzgn.com, appelsiini.net

Sumber https://www.panduanblog.id/