Caricare immagini visibili
Ipotizziamo di avere un client con connessione lenta e di voler far risparmiare un po’ di traffico dal dispositivo mobile.
A questo proposito, decidiamo di non caricare immediatamente le immagini, ma piuttosto di sostituirle con dei segnaposto, così:
<img src="placeholder.svg" width="128" height="128" data-src="real.jpg">Quindi, inizialmente tutte le immagini saranno sostituite da un segnaposto placeholder.svg. Quando la pagina viene scrollata fino alla posizione in cui possiamo vedere le singole immagini, andiamo a modificare l’attributo src sostituendolo con il valore del data-src, in modo che l’immagine venga finalmente caricata.
Ecco un esempio dentro l’iframe:
Scrollare per vedere le immagini “a richiesta”.
Requisiti:
- Quando la pagina viene caricata, le immagini che sono sullo schermo dovrebbero caricarsi immediatamente, prima di qualunque scroll.
- Alcune immagini potrebbero essere normali, prive dell’attributo
data-src. Queste immagini non dovrebbero essere influenzate dal nostro codice. - Una volta che l’immagine viene caricata, non dovrebbe più caricarsi, a prescindere che se si stia scrollando oltre o che l’elemento che la contenga torni nuovamente ad essere visibile sullo schermo.
P.S. Se potete, create una soluzione avanzata che effettui un “preload” delle immagini che sono poco sotto la posizione attuale.
P.P.S. Si deve gestire solamente lo scroll verticale, e non quello orizzontale.
Il gestore onscroll dovrebbe controllare quali immagini sono visibili e mostrarle.
Vogliamo anche eseguirla al caricamento della pagina, per rilevare immediatamente le immagini visibili e caricarle.
Il codice dovrebbe essere eseguito al caricamento del documento, in modo che abbia accesso al suo contenuto.
Oppure, per fare ciò, si potrebbe mettere alla del <body>:
// ...il contenuto della pagina sta sopra...
function isVisible(elem) {
let coords = elem.getBoundingClientRect();
let windowHeight = document.documentElement.clientHeight;
// il bordo superiore dell'elemento risulta visibile?
let topVisible = coords.top > 0 && coords.top < windowHeight;
// il bordo inferiore risulta visibile?
let bottomVisible = coords.bottom < windowHeight && coords.bottom > 0;
return topVisible || bottomVisible;
}The showVisible() function uses the visibility check, implemented by isVisible(), to load visible images:
function showVisible() {
for (let img of document.querySelectorAll('img')) {
let realSrc = img.dataset.src;
if (!realSrc) continue;
if (isVisible(img)) {
img.src = realSrc;
img.dataset.src = '';
}
}
}
showVisible();
window.onscroll = showVisible;P.S. La soluzione ha anche una variante di isVisible che “precarica” le immagini che sono distano solo una pagina di scroll sopra o sotto lo scroll corrente del documento.