Framework7 - Utilisation de la charge différée

La description

La charge paresseuse peut être appliquée aux images, aux images d'arrière-plan et avec un effet de fondu comme décrit ci-dessous -

Pour les images <img>

Pour utiliser la charge différée sur les images, suivez les étapes indiquées -

  • Utilisez l' attribut data-src au lieu de l' attribut src pour spécifier la source de l'image.

  • Ajoutez une classe paresseuse à l'image.

<div class = "page-content">
   ...
   <img data-src = "image_path.jpg" class = "lazy">
   ...
</div>

Pour les images d'arrière-plan

La charge différée peut également être utilisée pour les images d'arrière-plan, dans ce cas, suivez les étapes indiquées -

  • Spécifiez la source de l'image d' arrière-plan dans l'arrière-plan des données .

  • Ajoutez une classe paresseuse à l'image.

<div class = "page-content">
   ...
   <div data-background = "image_path.jpg" class = "lazy">
      ...
   </div>
   ...
</div>

Avec effet de fondu

Vous pouvez ajouter un effet de fondu à vos images en utilisant la classe lazy-fadein sur image / élément.

<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>