Cara Pasang Kode Lazy Load di Blog - Tegalwebside.com

Wednesday

Cara Pasang Kode Lazy Load di Blog


Tegalawebside.com - Lazy load merupakan salah satu trik optimasi yang berfungsi mempercepat loading blog dengan cara menunda pemuatan objek sampai pengunjung melakukan scroll kedalam konten yang dituju. Efek memasang kode lazy load dapat kalian lihat langsung pada blog ini, kalian pasti akan menemukan animasi titik hitam biru berputar sesaat setelah melakukan scrolling, nah itulah tampilan visual memasang kode lazy load pada blog. Namun untuk saat ini tampilan animasi lazy load pada blog ini hanya dapat dilihat pada mode desktop.

Selain berfungsi mempercepat loading, kode lazy load juga bisa dapat digunakan untuk mempercantik tampilan blog, sehingga blog kalian terlihat lebih profesional dan menarik.
Tentu dengan semakin cepatnya loading blog akan membuat visitor betah dan bepotensi meningkatkan posisi blog dimata mesin pencari.

Cara pasang kode lazy load di blog
Untuk memasang kode lazy load di blog, caranya sebagai berikut:

  • Silakan login ke blogger.
  • Kemudian pilih TemaEdit HTML.
  • Selanjutnya cari kode </body>  gunakan Ctrl+f  untuk mempermudah pencarian.
  • Setelah itu copy dan pastekan kode dibawah ini tepat diatas kode </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(){$(".post img").lazyload({placeholder:"https://3.bp.blogspot.com/-JlJLzxankMY/XH6UGSx3O1I/AAAAAAAACS8/SzjSHZTyWZwYVZ6ri5gT6FhA9oUuRf9VwCLcBGAs/s1600/loading-double-ring.gif",effect:"fadeIn",threshold:"0",effectTime:"2000"})});
//]]>
</script>
  • Selesai, silakan klik simpan.
Silakan ganti efek animasi loadingnya sesuai selera kalian dengan cara ganti url yang ditandai warna biru dengan url gambar berformat gif.
Demikian tutorial singkat Cara pasang kode lazy load di blog, semoga tutorial ini dapat menambah wawasan kalian tentang dunia blogging.

Share with your friends

Related Posts

Give us your opinion

Berkomentarlah secara bijaksana dan bertanggung jawab. Tidak diperkenankan meng-copy sebagian atau seluruh konten tanpa seizin penulis.