Lazy Load Image Untuk Meningkatkan SEO

Lazy load merupakan library js (javascript) yang berfungsi untuk penundaan load gambar pada halaman atau page yang panjang. Dimana gambar akan di load ketika posisi scroll pada bagian gambar itu sendiri. Ada banyak library lazy load ini yaitu jquery.lazyload untuk semua jenis web, plugin untuk wp (wordpress) plugin Lazy Load , untuk joomla bisa menggunakan LLFJ. Untuk penggunaannya bisa di lihat di masing-masing websitenya.



Simple Lazyload script ini sangat simple tinggal di wrapp dengan document.ready() dan menambahkan library jquery ( recomend library jquery yang terbaru). Script ini tidak perlu lagi menambahkan library yang lain atau tidak perlu lagi menambakan class khusus terhadap tag img tinggal pasang jalan istilah khusunya plug in play.

Silakan scriptnya copot di bawah ini.

//<![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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLeKy4BFh8OAfOvZjIF74GoWwt0P9KVaYW2kEQQCClOHO_exm9tV_OCWb19PHmJRKVxRhhJ773K4qtMR81O2G1z4ET4vS1sW8ZrOdrTq-14yTpxvh7R9rW7YMBVtt3Uj6xTaYYYHD9SLI/w140-h140-p/lazyload.gif",effect:"fadeIn",threshold:"-50"})})//]]>

Ingat di taruh sebelum tag </body> biar tambah manyus dan keren sekian untuk post kali ini. Mohon maaf setelah 1 tahun gak aktif dalam blog ini.

Browse More Articles

Tweet

Written by Unknown

aringan komputer (jaringan) adalah sebuah sistem yang terdiri atas dua komputer atau lebih yang didesain untuk dapat berbagi sumber daya ...