Ci sono tanti CMS e altrettanti plugin in grado di risolvere ogni problema di caricamento delle immagini. Ma se volessimo fare tutto da soli come dovremmo fare?
Se facciamo parte di quei programmatori che scrivono le pagine web da soli o che “non hanno plugin al di fuori di se stessi” e vogliamo caricare le immagini di una pagina web soltanto dopo aver caricato la pagina, allora possiamo utilizzare diversi metodi.
In questo articolo cercheremo di caricare alcune immagini – quelle identificate da un particolare attributo – soltanto dopo aver completato il caricamento di tutto il codice HTML e, quindi, soltanto dopo che la nostra pagina web è stata mostrata a visitatore.
Per ottenere il risultato utilizzeremo due accorgimenti:
- il caricamento di una piccola immagine “falsa”
- l’utilizzo dell’attributo data-src per consentire a JavaScript per caricare l’immagine vera.
Naturalmente se la nostra pagina web contiene soltanto 2 o 3 immagini e magari di pochi KB, non ha alcun senso utilizzare il caricamento posticipato delle immagini. Ma se la nostra pagina carica decine di immagini, allora il piccolo codice JavaScript che vedremo tra poco ridurrà drasticamente il caricamento della nostra pagina web (e ciò farà pensare a Google che noi siamo bravissimi!).
IL PROCEDIMENTO
Il procedimento è davvero banale.
La prima cosa da fare è scrivere il codice HTML che si occupa di caricare le nostre immagini nel seguente modo:
<img src="immagine_falsa_png" data-src="immagine_vera.jpg"/>
Il valore immagine_falsa.png dovrà essere sostituito con il link alla nostra immagine piccola da caricare subito al posto di tutte le immagini reali. In questo modo caricheremo una singola immagine di pochi KB. Allo stesso modo il valore immagine_vera.jpg dovrà essere sostituito con il link all’immagine reale che dovrà sostituire l’immagine falsa al termine del caricamento della pagina web.
Fatto questo, utilizziamo il seguente codice JavaScript per sostituire le immagini false con le immagini vere:
var imgDeferLoader = {
start: function() {
window.addEventListener("load", imgDeferLoader.onLoad, false);
},
onLoad: function() {
var imgDefer = document.getElementsByTagName('img');
for (var i=0; i<imgDefer.length; i++) {
if(imgDefer[i].getAttribute("data-src")) {
imgDefer[i].setAttribute("src",imgDefer[i].getAttribute("data-src"));
}
}
}
};
imgDeferLoader.start();
Cosa fa il codice?
Assolutamente niente di eccezionale. Inserisce nella variabile imgDefer tutte le immagini della pagina (riga 6). Poi scorre tutte queste immagini e, per quelle che hanno l’attributo data-src, sostituisce il valore dell’attributo src con quello indicato nell’attributo data-src.
Tutto qui! 🙂
Lo vediamo all’opera in tempo reale?
Si, sono d’accordo. Ecco un esempio in cui vengono caricate alcune immagini disposte su 3 colonne tramite il codice CSS che abbiamo visto in questo articolo.
Il caricamento delle immagini funzionerà soltanto al primo tentativo perché nei successivi le immagini saranno nella cache del Browser e quindi il Browser non le richiederà più al server.
Ti è stato utile questo post?
Ottimo! Allora potrebbe esserlo anche per qualcun altro. Quindi condividilo. È gratis! 😀