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>