Percepat Loading Blog Anda dengan Metode Berikut ini
Mungkin bisa membuat pengunjung tidak betah lama - lama di blog yang di kunjungi ternyata loadingnya lama. Otomatis trafik turun pastinya.
Lantas bagaimana solusinya ?
Banyak cara untuk mengoptimasi loading blog agar Fast Loading tentunya. Tapi disini saya cuma membahas solusi Percepat Loading Blog dengan menggunakan "Lazy Load".
Apa fungsi dari "Lazy Load"?
Kalau menurut review saya setelah memakai sih, Kegunaanya sendiri ialah untuk menunda loading image,contohnya jika anda membuka artikel yang imagenya banyak otomatis akan meloading atau memuat image (gambar) sampai selesai. Image (gambar) juga salah satu penyakit yang mempengaruhi loading blog anda menjadi lama,apalagi jika kualitas image(gambar) tersebut kualitas tinggi atau dengan jumlah yang banyak. Nah jika anda menggunakan Lazy Load, maka loading image akan ditunda dulu sampai anda menscrol kebawah untuk melihat image (gambar) selanjutnya.
Bagaimana Menggunakan "Lazy Load"?
Cukup mudah untuk menerapkan di blog anda. Ikuti langkah - langkah berikut:
Pastinya buka edit html pada template anda,selanjutnya cari kode </body>, jika sudah ketemu, copy pasti kode Lazy Load berikut diatas kode </body> pada template anda.
<script type='text/javascript'>https://lh3.googleusercontent.com/-Y8zjI5vI8I8/AAAAAAAAAAI/AAAAAAAAABo/dXlGX2ekfqY/photo.jpg bisa diganti dengan foto atau animasi yang tidak berat pastinya.
//<![CDATA[
// Lazy Load
!function(e){e.fn.lazyload=function(o){var t={threshold:0,failurelimit:0,event:"scroll",effect:"show",container:window};o&&e.extend(t,o);var i=this;return"scroll"==t.event&&e(t.container).bind("scroll",function(){var o=0;i.each(function(){if(e.abovethetop(this,t)||e.leftofbegin(this,t));else if(e.belowthefold(this,t)||e.rightoffold(this,t)){if(o++>t.failurelimit)return!1}else e(this).trigger("appear")});var n=e.grep(i,function(e){return!e.loaded});i=e(n)}),this.each(function(){var o=this;void 0==e(o).attr("original")&&e(o).attr("original",e(o).attr("src")),"scroll"!=t.event||void 0==e(o).attr("src")||t.placeholder==e(o).attr("src")||e.abovethetop(o,t)||e.leftofbegin(o,t)||e.belowthefold(o,t)||e.rightoffold(o,t)?(t.placeholder?e(o).attr("src",t.placeholder):e(o).removeAttr("src"),o.loaded=!1):o.loaded=!0,e(o).one("appear",function(){this.loaded||e("<img />").bind("load",function(){e(o).hide().attr("src",e(o).attr("original"))[t.effect](t.effectspeed),o.loaded=!0}).attr("src",e(o).attr("original"))}),"scroll"!=t.event&&e(o).bind(t.event,function(){o.loaded||e(o).trigger("appear")})}),e(t.container).trigger(t.event),this},e.belowthefold=function(o,t){if(void 0===t.container||t.container===window)var i=e(window).height()+e(window).scrollTop();else var i=e(t.container).offset().top+e(t.container).height();return i<=e(o).offset().top-t.threshold},e.rightoffold=function(o,t){if(void 0===t.container||t.container===window)var i=e(window).width()+e(window).scrollLeft();else var i=e(t.container).offset().left+e(t.container).width();return i<=e(o).offset().left-t.threshold},e.abovethetop=function(o,t){if(void 0===t.container||t.container===window)var i=e(window).scrollTop();else var i=e(t.container).offset().top;return i>=e(o).offset().top+t.threshold+e(o).height()},e.leftofbegin=function(o,t){if(void 0===t.container||t.container===window)var i=e(window).scrollLeft();else var i=e(t.container).offset().left;return i>=e(o).offset().left+t.threshold+e(o).width()},e.extend(e.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/-Y8zjI5vI8I8/AAAAAAAAAAI/AAAAAAAAABo/dXlGX2ekfqY/photo.jpg",effect:"fadeIn",threshold:"-50"})});
$(document).ready(function(){$(".pl").click(function(){$("#share-menu").slideToggle("fast")})});
//]]>
</script>
Jika sudah maka klik simpan dan cek hasilnya, untuk melihat perubahan coba buka artikel yang memakai gambar banyak, maka setiap gambar yang belum terlihat atau yang berada dibawah akan digantikan gambar yang ada pada kode diatas.
0 komentar: