Framework7 - Utilizzo del carico lento
Descrizione
Il carico pigro può essere applicato a immagini, immagini di sfondo e con effetto di dissolvenza come descritto di seguito -
Per le immagini <img>
Per utilizzare il caricamento lento sulle immagini, segui i passaggi indicati:
Utilizza l' attributo data-src invece dell'attributo src per specificare l'origine dell'immagine.
Aggiungi la classe pigro all'immagine.
<div class = "page-content">
...
<img data-src = "image_path.jpg" class = "lazy">
...
</div>
Per le immagini di sfondo
Il caricamento lento può essere utilizzato anche per le immagini di sfondo, in questo caso segui i passaggi indicati:
Specifica l'origine dell'immagine di sfondo in data-background .
Aggiungi la classe pigro all'immagine.
<div class = "page-content">
...
<div data-background = "image_path.jpg" class = "lazy">
...
</div>
...
</div>
Con effetto dissolvenza
Puoi aggiungere un effetto di dissolvenza in entrata alle tue immagini usando la classe di dissolvenza pigra a immagine / elemento.
<div class = "page-content">
...
<img data-src = "image_path.jpg" class = "lazy lazy-fadein">
<div data-background = "image_path.jpg" class = "lazy lazy-fadein">
...
</div>
...
</div>