Meningkatkan Kecepatan Blog (Blogger) Dengan Image Lazy Load Script !
Meningkatkan Kecepatan Blog (Blogger) dengan Image Lazy Load Script !
www.mediatronika.com - Meningkatkan Kecepatan Blog (Blogger) dengan Image Lazy Load Script !
Pengguna Internet Memiliki Website Berkualitas Tinggi tetapi mempunyai Kecepatan Loading (Pemuatan) yang Buruk Karena Lalu Lintas Tinggi Kaprikornus Anda harus Memperbaiki dan Mengoptimalkan Script, Gambar dan Hal Lain dari Blog Anda. 90% Pengunjung tidak tiba lagi ke blog Anda Jika blog Anda membutuhkan waktu loading 1-2 menit. Orang lebih Tertarik ke blog yang loadingnya Lebih Cepat alasannya ialah ini sanggup menghemat Waktu Pengunjung.
Meningkatkan Kecepatan Blog (Blogger) dengan Image Lazy Load Script ! |
Langkah-langkah untuk Menambahkan Image Lazy Load Script di Blogger:
- Login ke akun Blogger Anda dan Pilih Blog mana yang Anda ingin gunakan Image Lazy Load Script.
- Kemudian pilih "Template" Option yang Anda temukan di sisi kiri Anda.
- Klik Edit HTML dan Kode Template Terbuka
- Cari Tag <head> dengan menekan tombol CTRL + F dan copy Image Lazy Load Script berikut di atas Tag <head>
script type='text/javascript'>//<![CDATA[
(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:"http://i22.servimg.com/u/f22/15/42/72/40/grey10.gif",effect:"fadeIn",threshold:"-50"})})//]]></script>
- Setelah Menambahkan Script Klik "Save Template"
Apa yang dilakukan Image Lazy Load Script?
Script ini Hanya memungkinkan loading (pemuatan) gambar pada ketika postingan ditampilkan di Layar Browser Anda Bukan di Halaman Penuh. Kaprikornus bila Anda mempunyai Empat Gambar di Postingan Anda mungkin browser akan menampilkan dua gambar saja. Kaprikornus Kedua Gambar lagi akan tampil ketika Anda Menggulir (menggeser scroll) Ke bawah Halaman blog Anda.
CATATAN: Image Lazy Load Script ini hanya untuk Meningkatkan Kecepatan loading (Pemuatan) Gambar Blogger Anda Tapi Ada Satu Kerugian dari Skrip ini, ketika Anda menambahkan Script ini bila pengguna menonaktifkan Javascript di Browser mereka, maka gambar tidak akan tampil di Postingan Blog Anda.