Cara Menambahkan Pemalas Malas untuk Gambar di Blogger

Gambar membuat blog kita menarik dan menciptakan kesan yang sangat bagus di blog kita. Namun gambar sering kali diperhitungkan dan membutuhkan banyak ruang yang menyebabkan pemuatan situs web kami menjadi lambat.
Dan jika Anda menggunakan platform Blogger untuk blogging seperti saya, maka menjadi sangat sulit untuk memiliki plugin seperti yang dimiliki pengguna WordPress.
Anda mungkin menghabiskan waktu berjam-jam untuk bekerja, mencoba mengurangi ukuran dan byte gambar Anda, menggunakan beberapa perangkat lunak atau metode online lainnya.
Jadi, dalam tutorial ini, Anda akan belajar cara mengurangi waktu pemuatan halaman blog Blogger Anda dan meningkatkannya dengan hanya menambahkan skrip JQuery dalam 2 langkah sederhana dan mudah.

Manfaat Beban Gambar Malas untuk Gambar

Menggunakan Image Load akan membuat konten Anda dan bagian penting lainnya dari blog Anda sebelum gambar dimuat. Begitu,
Aliran halaman situs Anda membuat gambar Anda muncul tetapi memuat perlahan ketika seluruh konten halaman Anda dimuat.
Buat blog Anda gambar berat dengan semua prefetching dan memuat gambar yang pengunjung Anda mungkin bahkan tidak melihat dan dengan demikian blog Anda tidak perlu menderita.
Membuat situs Anda memuat lebih cepat dan karena itu mengesankan Mesin Pencari seperti Google, Yahoo, dll.
Jadikan kinerja situs web Anda meningkat dengan mengurangi rasio pentalan situs Anda.
Jika situs Anda berat visual maka menggunakan Image Loader akan sangat membantu.
Lihat di sini: Apa yang dikatakan IIlya Grigoril, seorang Advokat Pengembang dan Pelaku Web Google tentang pengoptimalan gambar, Jadi,

Cara Menambahkan Pemalas Malas untuk Gambar di Blogger

Ikuti langkah-langkah sederhana dan mudah dipahami di bawah ini dan Anda akan selesai dalam waktu singkat.
Langkah 1. Masuk ke Dasbor Blogger Anda dan Pilih Template / Tema dan klik Edit HTML.

Langkah 2. Cari </head> tag dan rekatkan kode di bawah ini tepat sebelum </head> tag.

  <! -- Image Lazy Loader Script by Wonder Krish -->   
  <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>   
  <!-- wonderkrish.com -- >

Catatan: Jika Anda telah menonaktifkan JavaScript di browser Anda, maka Anda tidak akan dapat melihat gambar posting Anda. Sebagai skrip hanya untuk meningkatkan kecepatan memuat gambar Blogger Anda.

Kesimpulan untuk Blogger Image Lazy Loader

Karena ini sepenuhnya merupakan skrip JQuery, ketika pengunjung Anda akan menggulir ke bawah blog Anda, gambar situs Anda akan dimuat dengan efek animasi yang indah satu demi satu.
Jika tutorial ini membantu Anda dalam mengoptimalkan gambar blog BlogSpot Anda. Atau jika Anda menemukan kesulitan maka Anda dapat meninggalkan komentar di bawah ini dan saya akan membalas Anda.