Scuolissima.com - Logo

Come ridurre il caricamento delle immagini su Blogger con Lazy Load

La velocità di un blog è un fattore che influisce positivamente se si ha un blog velocie e negativamente se si possiede un blog lento e come suggeritemi nell'articolo su come velocizzare un blog voglio presentare un metodo per ridurre il tempo di caricamento delle immagini attraverso un plugin per Blogger basato su JQuery che prende il nome di Lazy Load.

Questo plugin è adatto a chi crea pagine di lunghe dimensioni accompagnate da un alto numero di immagini o anche di poche immagini ma di enormi dimensioni. Il suo funzionamento consiste nel eseguire il caricamento delle immagini presenti nella parte bassa della pagina solo al momento in cui verranno visualizzate attraverso lo scroll; in poche parole viene ritardato il caricamento delle immagini per ottenere una visualizzazione complessiva della pagina in tempi minori.

Per installare il plugin Lazy Load andate su modello ed incollare appena prima di </head> il codice qui sotto e poi salvate il modello:

<!-- Lazy Load Inizio www.scuolissima.com -->
<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:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOLzwE66xE09X6UUIqKmsxLE52ifGsS8mr4cqQfA6TXCNDN5HZbGmKx-yHkAHTjrqf_SiBPzZGTFZlN3QDI892sjaYTV5448qcLxNta29MxCrMVYFDG5N2HZ39NaCH_qiI9qF0AmC4Zvc/s320/grey10.gif",effect:"fadeIn",threshold:"-50"})})//]]></script>
<!-- Lazy Load Fine www.scuolissima.com -->

Mentre se non vi funziona, potete provare ad usare la versione aggiornata di JQuery.

GUARDA ANCHE: Siti per diminuire il peso delle foto



🧞 Continua a leggere su Scuolissima.com
Cerca appunti o informazioni su uno specifico argomento. Il nostro genio li troverà per te.




© Scuolissima.com - appunti di scuola online! © 2012 - 2024, diritti riservati di Andrea Sapuppo
P. IVA 05219230876

Policy Privacy - Cambia Impostazioni Cookies