HTMLImageElement : propriété loading
Baseline
Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis mars 2022.
La propriété loading de l'interface HTMLImageElement est une chaîne de caractères qui fournit une indication à l'agent utilisateur sur la façon de gérer le chargement de l'image actuellement en dehors de la zone d'affichage visuelle de la fenêtre. Ceci aide à optimiser le chargement du contenu du document en reportant le chargement de l'image jusqu'à ce qu'elle soit censée être nécessaire, plutôt qu'immédiatement lors du chargement initial de la page. Elle reflète l'attribut de contenu loading de l'élément <img>.
Valeur
Une chaîne de caractères dont la valeur est eager ou lazy. Pour leurs significations, voir la référence HTML <img>.
Exemples
La fonction addImageToList() ci-dessous ajoute une miniature photo à une liste d'éléments, en utilisant le chargement différé pour éviter de charger l'image depuis le réseau tant qu'elle n'est pas réellement nécessaire.
function addImageToList(url) {
const list = document.querySelector("div.photo-list");
let newItem = document.createElement("div");
newItem.className = "photo-item";
let newImg = document.createElement("img");
newImg.loading = "lazy";
newImg.width = 320;
newImg.height = 240;
newImg.src = url;
newItem.appendChild(newImg);
list.appendChild(newItem);
}
Spécifications
| Specification |
|---|
| HTML # dom-img-loading |
Compatibilité des navigateurs
Voir aussi
- L'élément HTML
<img> - Performances web dans la zone d'apprentissage MDN
- Le chargement différé dans le guide des performances web MDN