Lazy load merupakan jquery yang perlu kita pasang supaya pemuatan gambar pada blog menjadi lebih cepat. Dalam beberapa kasus, banyak yang menggunakan javascript ini untuk mempercepat blognya pada hasil tes kecepatan di situs Pagespeed Insight.
Tapi, tahukah anda? Bahwa belum tentu situs anda menjadi lebih cepat, loh. Beberapa masalah bloger menyampaikan bahwa jquery ini tidak berfungsi sama sekali. Jikalau jquery ini tidak berfungsi, maka sanggup disimpulkan bahwa jquery ini akan memperlambat durasi pemuatan blog anda, loh.
Nah, ternyata oh ternyata, itu memang terjadi. Apabila aku tak salah, aku menggunakan template buatan mas Sugeng yang berjulukan “Blogku Blogger Template” dan aku memasang jquery ini pada blog berplatform blogspot ini. Saya melihat satu perbedaan mencolok pada ketika pemuatan blog ini. Apakah itu? Sesuai dengan namanya “lazy load”, gambar akan dimuat dengan cepat tetapi gambar akan muncul jikalau kita scroll ke bawah alias malas ditampilkan.
Saat aku melihat hasil di pagespeed insight juga kesannya menjadi lebih cepat. Maaf, aku tak sanggup menampilkan kesannya alasannya aku telah berganti template blog. Hehe... Sekali lagi mohon maaf.
Nah, selanjutnya aku mencoba pada template “Vikka Blogger Template” tanpa jquery library. Dan mengejutkan sekali hasilnya, sobat. Ternyata memang benar apa yang dikatakan para bloger itu, blog aku menjadi lebih lambat, pengaruh lazy load tidak terlihat, dan hasil dari Pagespeed Insight berkurang. Merugikan sekali bukan?
Maka dari itu, sehabis pemasang javascript jquery ini, harap pribadi mengunjungi situs anda untuk mengetahui apakah jquery ini berjalan dengan lancar atau tidak. Kalau begitu, pribadi saja kita ke topik, berikut ini yaitu cara memasang jquery lazy load pada blog atau situs.
1. Buka sajian edit pada blog anda.
2. Cari instruksi </body>
3. Lihat, apakah ada instruksi <link href=’..’/> ?
4. Jikalau ada instruksi tersebut, maka pribadi masukkan javascript dibawah diatas instruksi tersebut. Jikalau tidak ada, maka masukkan instruksi ini sempurna di atas instruksi </body>
6. Kunjungi blog anda
7. Jikalau pengaruh lazy load pada gambar muncul, maka “selamat anda berhasil”
8. Jikalau gagal, maka hapus instruksi tersebut dan simpan template.
9. Selesai.
Praktis bukan?
Kalau begitu, sekian pembahasan pada artikel kali ini. Terimakasih atas kunjungan anda dan hingga jumpa di artikel lainnya.
Tapi, tahukah anda? Bahwa belum tentu situs anda menjadi lebih cepat, loh. Beberapa masalah bloger menyampaikan bahwa jquery ini tidak berfungsi sama sekali. Jikalau jquery ini tidak berfungsi, maka sanggup disimpulkan bahwa jquery ini akan memperlambat durasi pemuatan blog anda, loh.
Nah, ternyata oh ternyata, itu memang terjadi. Apabila aku tak salah, aku menggunakan template buatan mas Sugeng yang berjulukan “Blogku Blogger Template” dan aku memasang jquery ini pada blog berplatform blogspot ini. Saya melihat satu perbedaan mencolok pada ketika pemuatan blog ini. Apakah itu? Sesuai dengan namanya “lazy load”, gambar akan dimuat dengan cepat tetapi gambar akan muncul jikalau kita scroll ke bawah alias malas ditampilkan.
Saat aku melihat hasil di pagespeed insight juga kesannya menjadi lebih cepat. Maaf, aku tak sanggup menampilkan kesannya alasannya aku telah berganti template blog. Hehe... Sekali lagi mohon maaf.
Nah, selanjutnya aku mencoba pada template “Vikka Blogger Template” tanpa jquery library. Dan mengejutkan sekali hasilnya, sobat. Ternyata memang benar apa yang dikatakan para bloger itu, blog aku menjadi lebih lambat, pengaruh lazy load tidak terlihat, dan hasil dari Pagespeed Insight berkurang. Merugikan sekali bukan?
Maka dari itu, sehabis pemasang javascript jquery ini, harap pribadi mengunjungi situs anda untuk mengetahui apakah jquery ini berjalan dengan lancar atau tidak. Kalau begitu, pribadi saja kita ke topik, berikut ini yaitu cara memasang jquery lazy load pada blog atau situs.
1. Buka sajian edit pada blog anda.
2. Cari instruksi </body>
3. Lihat, apakah ada instruksi <link href=’..’/> ?
4. Jikalau ada instruksi tersebut, maka pribadi masukkan javascript dibawah diatas instruksi tersebut. Jikalau tidak ada, maka masukkan instruksi ini sempurna di atas instruksi </body>
<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:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkQpQ8qQHswOm70l_If5gY9wLCfUAGhh2neEDfOkKH1WRllCCpWIebHzaVdxkdIw9Y_zWGUJ4O9Cwm6nYqwVfaJLGNuEfuePloMjbN1x6kpZfmJZf-AsV1ER5JnwMHzLbM5DU8vuhNQoQA/s640/arlinadesign.gif",effect:"fadeIn",threshold:"-50"})}); //]]> </script>
Sumber kode: Arlina Design5. Simpan template
6. Kunjungi blog anda
7. Jikalau pengaruh lazy load pada gambar muncul, maka “selamat anda berhasil”
8. Jikalau gagal, maka hapus instruksi tersebut dan simpan template.
9. Selesai.
Praktis bukan?
Kalau begitu, sekian pembahasan pada artikel kali ini. Terimakasih atas kunjungan anda dan hingga jumpa di artikel lainnya.