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>