Non solo caricamento pigro di immagini in le pagine web aiutano nelle prestazioni dell'età, ma aiuta anche in Search Engine Optimization come osservato. Puoi usare jQuery e persino Mootools per il caricamento lento delle immagini. Le immagini verranno visualizzate solo quando le scorrerai.
Questo suggerimento jQuery riduce molte richieste esterne durante il caricamento della pagina, aiutando in definitiva a caricare più velocemente il tuo blog WordPress. Durante l'utilizzo di questo trucco, dovresti anche utilizzare la tecnica della cache per semplificare il caricamento della pagina.
Contenuti
Che cos'è il caricamento lento?
Il caricamento lento è quando scarichi i contenuti quando ne hai bisogno, invece di scaricarli tutti in una volta.
Il caricamento lento è una tecnica di ottimizzazione utilizzata su Internet. Carica solo la sezione della pagina Web di cui hai bisogno all'inizio e non carica altre parti finché non fai clic su di esse. In questo modo, non è necessario caricare tutte le informazioni dall'inizio alla fine.
Una forma di caricamento lento è chiamata scorrimento infinito. Ciò significa che scorrendo la pagina verso il basso, verranno caricati automaticamente più contenuti.
Perché il caricamento lento è importante?
L'enorme carico utile di una pagina web è pieno di immagini, script, fogli di stile, caratteri e video. Le immagini prendono oltre il 60% delle dimensioni di una tipica pagina web. Non è possibile eliminarli perché sono importanti per il design di una pagina web.
Senza alcuna ottimizzazione, il tuo browser web scarica tutto prima di eseguire il rendering della pagina. Questo rallenta il caricamento della pagina.
Ha senso fare il possibile per caricare più velocemente le tue pagine web. E quando si tratta di immagini, sono quelle che contribuiscono maggiormente alle dimensioni di un sito web.
Quindi, se inizi con loro, è una buona idea perché il tuo sito web si caricherà velocemente. È qui che il caricamento lento è utile perché scarica solo le parti di un'immagine che sono visualizzate sulla tua pagina in un dato momento.
Come configurare il caricamento lento con jQuery?
Ci sono plugin che ti permettono di eseguire cose semplici, ma meno plugin usi meno, più efficiente sarà il tuo blog.
Non importa quale tema WordPress stai utilizzando, puoi implementare il caricamento lento molto facilmente.
È solo un tutorial in due passaggi, uno per l'aggiunta di jQuery e l'altro per assegnare il tag img a una classe, se vuoi caricare lentamente immagini specifiche sul tuo blog WordPress.
Ecco la funzione jQuery, che dovrai aggiungere agli script del tuo tema.
/* lazyload.js (c) Lorenzo Giuliani * MIT License (http://www.opensource.org/licenses/mit-license.html) */ !function(window){ var $q = function(q, res) { if (document.querySelectorAll) { res = document.querySelectorAll(q); } else { var d=document , a=d.styleSheets[0] || d.createStyleSheet(); a.addRule(q,'f:b'); for(var l=d.all,b=0,c=[],f=l.length;b= 0 && rect.left >= 0 && rect.top ) } var images = new Array() , query = $q('img.lazy') , processScroll = function(){ for (var i = 0; i < images.length; i++) { if (elementInViewport(images[i])) { loadImage(images[i], function() { images.splice(i, i); }); } }; } ; // Array.prototype.slice.call non è richiamabile con il nostro adorabile IE8 for (var i = 0; i < query.length; i++) { images.push(query[i]); }; processScroll(); addEventListener('scroll',processScroll); }(questo);
<img src="blank.gif" class="lazy" data-src="/images/full-size.jpg" width="240" height="152"></a>
Ed ecco come puoi chiamare la funzione jQuery per implementare il caricamento Lazy delle immagini in modo dinamico. È necessario utilizzare la classe pigra per ogni immagine che si desidera caricare utilizzando la funzione jQuery.
Conclusione
Lazyload è una buona cosa da avere per il tuo blog o sito web aziendale. Aiuta con la SEO e Google può vederlo. Ma non devi preoccuparti di questo perché sanno come funziona il lazyloading.
Puoi anche personalizzarlo come preferisci modificando l'animazione e aggiungendo un ritardo.
Ciao,
È una buona informazione ed è molto utile. Lazy È molto utile poiché stavo usando i temi per mostrare le immagini.
Buon lavoro e continua così...!