Blogger Lazy Load Eklenti Kodları
Blogger Lazy Load Nedir?
Lazy Load, sitenizde bulunan resim dosyalarını yüklemeyi erteleyerek sitenizi hızlandırır. Bir siteye ilk giriş yapıldığın yüklenmesi gereken dosya sayıları oldukça fazladır. Yükleme yapılan dosyalar arasında ise resimler de oldukça fazla yer kaplamaktadır. Sitenize Lazy Load uygulaması yaparak bu resimlerin yüklemesini erteleyebilir ve sitenizde kullanıcılar sitede aşağı doğru gezinme yaptığında sonradan yüklenmesini yaparak site hızınızı artırabilirsiniz.Blogger Lazy Load Nasıl Yapılır?
Blogger panelinizde Tema bölümüne giriş yaptıktan sonra HTML’yi Düzenle diyerek tema düzenleme bölümüne giriş yapın.Daha sonra aşağıda bulunan kodları sitenizde </body> etiketlerinin üstüne ekleyerek temanızı kaydedin.
<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 : -200, container: window})","above-the-fold":"!$.belowthefold(a, {threshold : -200, container: window})","right-of-fold":"$.rightoffold(a, {threshold : -200, container: window})","left-of-fold":"!$.rightoffold(a, {threshold : -200, container:window})"})})(jQuery);$(function(){$("img").lazyload({placeholder:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjn8rLCzOffnF64fvL1JWLoDX2fgI-5VH_b5q01zrB8O328wGdhBJ55cjdN_Pwu8P2qZ0mTlHJRyz5gsm3SoSNmbd2vnwn-1Qup5toTyCvt3E5sAT5mRUqp7JwAu5QMIGqoWwjvbEOfiZQ/s40/yukleniyor.gif",effect:"fadeIn",threshold:"-200"})});
//]] > </script>
Bu işlemleri yaptıktan sonra Blogger (Blogspot) sitenize
Lazy Load resim yüklemesini ertelemeyi uygulamış olursunuz sitenizde artık
resimler aşağı doğru indikçe yüklenecektir ve site hızınız daha fazla
olacaktır.
Hiç yorum yok: