Cara Pasang Lazy Load Di Blogger

Hallo para blogger, kali ini aku akan mengembangkan plugin untuk mempercepat loading blog. Mengoptimalkan kecepatan loading blog itu penting untuk pengunjung blog dan salah satu cara biar mempercepat loading blog dengan cara menambahkan atau memasang Plugin Lazy Load di blog kita.

 kali ini aku akan mengembangkan plugin untuk mempercepat loading blog Cara Pasang Lazy Load di Blogger

Lazy Load untuk kita para pemula sering di sebut Effek Loading Gambar di blog, yang sanggup di artikan sebagai sebuah plugin atau script yang dibangun dan dikembangkan khusus untuk platform Blogger.

Fungsinya untuk menunda pemanggilan objek saat 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 alasannya hanya memuat halaman yang terbuka saja, saat anda scroll cursor anda ke bawah, gres disini semua halaman akan dimuat secara keseluruhan.

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

Yosh, sudah menegertikan apa itu Lazy Load. Baiklah mari kita mulai cara pasangnya di blogger kita.

Cara Pasang Lazy Load di Blogger untuk mempercepat loading


1. Buka Dasbor Blogger sobat.
2. Pilih sajian Tema kemudian Edit HTML
3. Cari Kode </body> dan pastekan instruksi di bawah ini di atasnya.

<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(){$(".post img").lazyload({placeholder:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwXnW2Kt4I4jKDae_P2g52FKtQaRmWi0Pfs1bZVHdJmhyH4cpa2qEqdfkKOiXC2FJZGdokqROYtFtMdBhwCAS_UmBkyOQJDm7K6E8_EgNnL__vhx_a9w2Y3Biq7MXtbkISM4EUkkok9oQ/s320/LazyLoading.gif",effect:"fadeIn",threshold:"0",effectTime:"2000"})}); //]]> </script>

Anda juga sanggup mengganti effek loadingnya dengan cara mengganti url yang aku tandai di atas dengan url gambar (.jpg,.gif,.png,dll) yang telah di upload

Tampilan Lazy Load-nya ibarat gambar di bawah :

 kali ini aku akan mengembangkan plugin untuk mempercepat loading blog Cara Pasang Lazy Load di Blogger

Ok, silahkan di coba semoga berhasil...
Sumber https://www.denylistianto.com/

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel