HTML <img> loadingAttribut
Exemple
Ajoutez le chargement différé à plusieurs images en bas de la page ; elles ne s'affichent que lorsque la souris défile jusqu'à leur position :
<img src="/images/wedding.jpeg" alt="Mariage" style="width:100%">
<img src="/images/rocks.jpeg" alt="Rochers" style="width:100%">
<!--Image avec chargement différé activé-->
<img src="/images/paris.jpeg" alt="Paris" style="width:100%" loading="lazy">
<img src="/images/nature.jpeg" alt="Nature" style="width:100%" loading="lazy">
<img src="/images/underwater.jpeg" alt="Sous l'eau" style="width:100%" loading="lazy">
<img src="/images/ocean.jpeg" alt="Océan" style="width:100%" loading="lazy">
<img src="/images/mountainskies.jpeg" alt="Montagnes" style="width:100%" loading="lazy">
Essayez-le vous-même »
Prise en charge des navigateurs
| Attribut | |||||
|---|---|---|---|---|---|
| loading | 77.0 | 79.0 | 75.0 | Non pris en charge | 64.0 |
Définition et utilisation
L'attribut loading spécifie si le navigateur doit charger une image immédiatement ou différer son chargement.
Paramètreloading="lazy"Elle n'est affichée que lorsque la souris fait défiler jusqu'à l'emplacement de l'image.
Syntaxe
<img src="URL.html" loading="eager|lazy">
Valeur de l'attribut
| Valeur | Description |
|---|---|
| eager | Par défaut, l'image est chargée immédiatement. |
| lazy | L'image est chargée de manière différée ; elle n'est affichée que lorsque la souris fait défiler jusqu'à l'emplacement de l'image. |
Balise HTML <img> Autres extensions