Iklan

Menambahkan Plugin Lazy Load untuk Mempercepat Loading Blog

Baca Juga



reload blog image with lazy load pluginBeragam cara, tips dan trik bisa dilakukan untuk mempercepat loading blog, khususnya dengan platform blogspot ini. Coba saja ketika di tool pencarian Google dengan kata kunci tips mempercepat loading blog, tentunya Anda akan banyak menemui serangkaian panduan dengan cara yang berbeda-beda.

Namun sebenarnya prinsipnya tetap satu, yaitu mengoptimalkan loading blog agar bisa diakses dengan cepat. Semakin cepat aksesnya, tentu saja pengunjung blog juga akan senang, karena bisa menghemat waktu dan kuota internet.
Nah kali ini Tukang Toko Online akan membagikan cara yang cukup mudah karena tidak dibutuhkan penggantian script, hanya cukup memasang script plugin ini ke dalam html template blogspot Anda.

Plugin ini sebenarnya cukup populer, dinamakan Plugin Lazy Load. Fungsinya sederhana, yaitu plugin ini hanya bekerja untuk mencegah gambar dimuat sebelum pengunjung melakukan scrolling. Dengan begitu blog menjadi lebih cepat diakses.

Baiklah, langsung saja ke bagian tutorial pemasangannya.

1. Masuk ke HTML Template >> cari kode </body> yang terletak di bagian paling bawah dari script template >> pasang kode script di bawah ini tepat di atas kode </body> tersebut.
<!--lazy load script-->
<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://lh3.googleusercontent.com/-V7BDYa8Hcvk/XBZ4Nm-9dxI/AAAAAAAAC9A/9c5sJTiQdGIdOw0uP0V5CMB2u57LzBBqQCLcBGAs/s1600/tukangtokoonline.gif",effect:"fadeIn",threshold:"-50"})});
//]]>
</script>

2. Simpan Template

Dan lihat hasilnya
Semoga bermanfaat

Komentar

Popular

Green Store Template untuk Toko Online Blogspot Nuansa Hijau

2 Template Toko Online Blogspot Gratis Rasa Premium

Toko Online Blogspot Super Responsive dengan tukutoko THEME