HTML <img> chargement Attribut
Exemple
Ajoutez le chargement paresseux aux images situées en dessous de la ligne de flottaison :
<img src="/w3images/wedding.jpg" alt="Mariage" style="width:100%">
<img src="/w3images/rocks.jpg" alt="Rochers" style="width:100%">
<!-- images hors écran -->
<img src="/w3images/paris.jpg" alt="Paris" style="width:100%" loading="lazy">
<img src="/w3images/nature.jpg" alt="Nature" style="width:100%" loading="lazy">
<img src="/w3images/underwater.jpg" alt="Sous-marin" style="width:100%" loading="lazy">
<img src="/w3images/ocean.jpg" alt="Océan" style="width:100%" loading="lazy">
<img src="/w3images/mountainskies.jpg" alt="Montagnes" style="width:100%" loading="lazy"> Définition et Utilisation
L'attribut loading spécifie si un navigateur doit charger une image immédiatement ou différer le chargement des images hors écran jusqu'à ce que, par exemple, l'utilisateur fasse défiler près d'elles.
Conseil : Ajoutez loading="lazy" uniquement aux images qui se trouvent en dessous de la ligne de flottaison.
Support des Navigateurs
| Attribut | |||||
|---|---|---|---|---|---|
| loading | 77.0 | 79.0 | 75.0 | Non Supporté | 64.0 |
Syntaxe
<img src=" URL " loading="eager|lazy"> Valeurs des Attributs
| Valeur | Description |
|---|---|
| eager | Par défaut. Charge une image immédiatement |
| lazy | Diffère le chargement des images jusqu'à ce que certaines conditions soient remplies |