√Cara memasang script Lazy Load gambar di blogger agar loading lebih cepat - dirga.id

Cara memasang script Lazy Load gambar di blogger agar loading lebih cepat


cara-memasang-script-lazy-load-blogger


Seperti yang kita tahu bahwa gambar merupakan salah satu penyebab dari sekian banyak hal yang membuat loading blog menjadi berat. Ada berbagai cara yang bisa kita lakukan untuk menangani ini,seperti mengurangi jumlah penggunaan gambar,melakukan kompres atau mengubah ukurannya. Namun biasanya hal tersebut masih membuat loading menjadi berat bahkan bisa mengurangi kualitas gambar di blog kita.

Itu sebabnya anda haru menggunakan Lazy Load di blog anda.

Apa itu Lazy Load?

Lazy load adalah sebuah fitur pada blog yang memungkinkan gambar di muat hanya saat pengguna akan menggunkan gambar tersebut.
Yang artinya pada awal pemuatan blog hanya memproses file-file pening saja sedangkan gambar di tayangkan saat kita kan membukanya saja.

Keuntungan memasang Lazy Load Gambar?


- Loading Blog Lebih Cepat- Skor GTmetrix,Google PagespeesInsight dan TestMySite by thinkwhitgoogle lebih bagus- Mengatasi masalah Leverage Browser Caching


Bagaimana apakah anda sudah tertarik untuk menggunakannya?


Berikut ini cara memasang lazy load gambar di blogger agar loading lebih cepat :


  • Buka Blogger.com dan masuk menggunakan akun kalian


buka-blogger-anda



masuk-log-in-menggunakan-akun-gmail-anda


  • Masuk ke menu Tema > Lalu pilih Edit HTML


masuk-tema-pilih-edit-html



  • Sekarang anda cari kode berikut ini

</body>


  • Pastekan kode berikut tepat di atasnya


<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:"http://1.bp.blogspot.com/-Qg5bi1ZtDdM/VZ5nHAyYBqI/AAAAAAAAChE/exGnasO4oyk/s640/arlinadesign.gif",effect:"fadeIn",threshold:"-50"})});

//]]>

</script>



  • Bila sudah klik Simpan Tema


Itulah cara memasang lazy load gambar di blogger,lakukan langkah-langkah tadi dengan benar agar anda tidak mengalami kerusakan pada template blog yang anda gunakan. Selamat mencoba,dan semoga blog anda menjadi lebih cepat untuk di akses.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel