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.
2. Cari </body> menggunakan Ctrl + F.
3. Salin script dibawah ini. Letakkan sebelum(Diatas) </body>
Lihat hasilnya. sekarang blog anda sudah mempunyai fitur lazy load yang keren dan bagus untuk blog anda sendiri.
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:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdCBd4jZi-Ft1eFHjl6aGqvFrwHat-6ohbwFjK7V7XDs5NqD-0tnwXfBcT_xGIfZhOaHvv7Gnfohg3h-GROx-0xp3FPCeKwFzeZIqZH8H_24SYQ0XOf21hKEt8MWKN-7KF1Knk-sKWVUm8/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.
Demikianlah tutorial singkat ini, semoga bermanfaat untuk anda dan blog anda. terima kasih sudah berkunjung di blog surya pero.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.
Posting Komentar untuk "Cara Cepat Loading Gambar Blog Menggunakan LazyLoad"