Cara Cepat Loading Gambar Blog Menggunakan LazyLoad

lazy load images - Bagi anda pengguna blogger, setiap membuat artikel harus mempunyai gambar postingan bukan ? pada kesempatan ini saya akan membagikan tutorial penting bagi pengguna blog yaitu mempercepat loading gambar artikel anda menggunakan script lazy load.

Lazyload dalam bahasa indonesia artinya adalah loading lambat, tetapi itu cuma namanya saja yang mengecoh para pengguna blogger, takut loading blognya menjadi lambat. padahal manfaatnya banyak sekali menggunakan script lazyload ini.

Apa pernah anda mengunjungi sebuah website, saat anda scroll halaman website gambar yang hilang menjadi muncul secara transition(ada waktu) yang mengatur. nah, coba anda menggunakan script lazyload ini, anda tidak rugi tetapi banyak mendapatkan keuntungan blog dan pengunjung menjadi nyaman.

Cara Memasang Lazy Load Di Blog

1. Buka blogger > Theme > Edit Themplate.
2. Cari </body> menggunakan Ctrl + F.
3. Salin script dibawah ini. Letakkan sebelum(Diatas) </body>

<script type='text/javascript'>
//<![CDATA[
// Lazy Load
// www.suryapero.com
(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://1.bp.blogspot.com/-Qg5bi1ZtDdM/VZ5nHAyYBqI/AAAAAAAAChE/exGnasO4oyk/s640/arlinadesign.gif",effect:"fadeIn",threshold:"-50"})});
//]]>
</script>

4. Save Themplate.

Lihat hasilnya. sekarang blog anda sudah mempunyai fitur lazy load yang keren dan bagus untuk blog anda sendiri.

BANTU KAMI UNTUK MEMBAGIKAN ARTIKEL MANFAAT KE TEMAN-TEMAN ANDA MAUPUN SOSIAL MEDIA ANDA, AGAR BLOG INI BISA BERKEMBANG DAN BANYAK MEMBAGIKAN ILMU BERMANFAAT UNTUK SELURUH ORANG.

Demikianlah tutorial singkat ini, semoga bermanfaat untuk anda dan blog anda. terima kasih sudah berkunjung di blog surya pero.

Surya Seorang mahasiswa yang senang membagikan informasi yang sudah saya dapatkan. Informasi yang saya tulis blog ini, sesuai pengalaman saya dari pertama blog.

Berbagi :