Maskode.com

Media berbagi informasi menarik dan terkini

Maskode.com
Maskode.com

Cara Menggunakan Lazy Load Gambar di Blog

memasang script lazy load image di blogger
Cara Menggunakan Lazy Load di Blog - Penggunaan banyak gambar di dalam blog dapat membuat proses pemuatan blog menjadi berat dan lemot ketika halaman diakses oleh pengunjung. Pemuatan / loading blog yang berat dapat membuat para pengunjung pergi dan meninggalkan halaman blog begitu saja.

Google sendiri menyaranan kepada para pemilik website maupun blog, untuk mengoptimal pemuatan halaman situs menjadi lebih cepat dan ringan ketika diakses oleh pengunjung. Situs yang baik adalah situs web maupun blog yang memiliki kecepatan loading maksimal 5 detik. Apabila halaman blog Anda memiliki kecepatan pemuatan lebih dari 5 detik, ada baiknya di optimalkan agar menjadi lebih cepat dan ringan.

Mengapa blog harus memiliki proses pemuatan yang cepat dan ringan? berikut ini, beberapa alasan kenapa blog Anda harus memiliki akses pemuatan yang cepat.
  1. Blog dengan pemuatan akses yang lama dapat membuat pengunjung bosen menunggu hingga halaman termuat semua.
  2. Blog dengan pemuatan yang lama dapat menurunkan jumlah visitor.
  3. Google lebih suka pada situs website maupun blog yang memiliki pemuatan ringan, seperti yang kita ketahui bahwa Google selalu berusaha untuk memberikan kenyamanan pengguna.
Lalu bagaimana cara untuk meningkatkan proses pemuatan blog agar menjadi lebih cepat dan ringan? banyak cara yang dapat Anda gunakan untuk mempercepat pemuatan halaman blog, salah satunya dengan memasang script Lazy Load pada gambar di dalam blognya.

Baca juga: Tips untuk mempercepat halaman blog menjadi ringan

Apa yang dimaksud dengan Lazy Load? sebuah script yang digunakan untuk menyembunyikan suatu gambar sementara. Gambar akan muncul dan dimuat ketika pengunjung mengulir atau menscroll halaman kebawah.

Dengan menggunakan script Lazy Load dapat membuat proses pemuatan halaman blog menjadi lebih cepat dan ringan, ini dikarena pengunjung tidak memuat semua seluruh data (gambar) yang ada dihalaman blog dan data yang sebelumnya tidak dimuat, akan termuat secara otomasi ketika pengunjung mengulir halaman ke bagian bawah.

Lalu bagaimana cara menggunakan Lazy Load ke dalam blog? buat Anda yang tertarik untuk memasang script Lazy Load agar halaman blog menjadi lebih cepat dan ringan ketika diakses oleh pengunjung, Anda dapat ikuti langkah-langkah berikut ini:
  • Pertama buka dashboard blog dan pilih tab Template > Edit HTML.
  • Setelah itu cari kode script </head> atau &lt;/head&gt;&lt;!--<head/>--&gt;
  • Kemudian silakan copy kode dibawah ini dan taruh diatas kode yang head tadi.
<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:"https://i22.servimg.com/u/f22/15/42/72/40/grey10.gif",effect:"fadeIn",threshold:"-50"})})//]]></script>

  • Terakhir silakan Anda klik tombol Simpan perubahan.
Nah itulah bagaimana cara untuk memasang script lazy load gambar di dalam blog agar membuat kecepatan pemuatan menjadi lebih ringan dan cepat. Demikianlah dari artikel ini, apabila Anda menyukainya jangan lupa untuk membagikan artikel ini dan semoga bermanfaat.

Rujukan: Stack Overflow - Lazy Load on Blogger

 
Maskode.com © Copyright 2019. All right reversed.