Memasang Script Lazy Load Di Blogger - Hallo sahabat Teknoz Update, Pada Artikel yang anda baca kali ini dengan judul Memasang Script Lazy Load Di Blogger, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel JavaScript, Artikel News, Artikel Tutorial, Artikel Widget, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Memasang Script Lazy Load Di Blogger
link : Memasang Script Lazy Load Di Blogger

Memasang Script Lazy Load Di Blogger

Lazy Load ialah pola desain yang umumnya digunakan dalam pemrograman komputer buat menunda inisialisasi objek sampai titik di mana diperlukan. Lazy Load ini berfungsi buat menunda pemuatan gambar pada halaman web yang panjang. jadi, gambar bakal dimuat dikala pengguna menyelenggarakan scrolling pada halaman tersebut. Menggunakan Lazy Load pada halaman blogger yang panjang bakal membuat load halaman lebih cepat. Dalam beberapa kasus juga dapat membantu mengurangi beban server.

Contoh halaman yang menggunakan Lazy Load pada Blogger. silahkan klik disini
jika anda menerapkan Lazy Load pada situs kamu, silahkan bersihkan cache browser tersebih dahulu buat menyelenggarakan 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 mau 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/AVvXsEiOH_9A3OQJu8jq-e8R3xj68QD4f7qMyfiZFoIjanc9UA4Xv7Xq6avzAzIyMj8TzUJAq3TmWvCODoIFg2LaR_-TslFMsUPb7iAC3Uq2wmxModHQiL2lujgWu2jleyiRn16NLZd5zNm_vsTA/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 bakal cuma dimuat dikala pengunjung menyelenggarakan scroll ke bawah

Sekian mengenai Cara Memasang Script Lazy Load di Blogger semoga bermanfaat buat kamu. terimakasih serta selamat mencoba.

referensi: arlinadzgn.com, appelsiini.net

loading...

Demikianlah Artikel Memasang Script Lazy Load Di Blogger

Sekianlah artikel Memasang Script Lazy Load Di Blogger kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Memasang Script Lazy Load Di Blogger dengan alamat link https://teknozupdate.blogspot.com/2017/05/memasang-script-lazy-load-di-blogger.html