HTMLImageElement : propriété decoding

Valeur

Une chaîne de caractères dont la valeur est sync, async, ou auto. Pour leur signification, voir la référence HTML <img>.

Exemples

Dans l'exemple ci-dessous, vous obtiendrez probablement une image vide affichée sur la page pendant le téléchargement de l'image. Définir decoding ne l'empêchera pas.

const img = new Image();
img.decoding = "sync";
img.src = "img/logo.png";
document.body.appendChild(img);

Insérer une image après le téléchargement peut rendre la propriété decoding plus pertinente :

async function loadImage(url, elem) {
  return new Promise((resolve, reject) => {
    elem.onload = () => resolve(elem);
    elem.onerror = reject;
    elem.src = url;
  });
}

const img = new Image();
await loadImage("img/logo.png", img);
// L'utilisation de `sync` permet de s'assurer que les autres contenus ne sont mis à jour qu'avec l'image
img.decoding = "sync";
document.body.appendChild(img);
const p = document.createElement("p");
p.textContent = "L'image est complètement chargée !";
document.body.appendChild(p);

Une meilleure solution consiste cependant à utiliser la méthode HTMLImageElement.decode() pour résoudre ce problème. Elle permet de décoder une image de façon asynchrone, en retardant son insertion dans le DOM jusqu'à ce qu'elle soit entièrement téléchargée et décodée, évitant ainsi le problème d'image vide mentionné ci-dessus. Ceci est particulièrement utile si vous remplacez dynamiquement une image existante par une nouvelle, et cela évite également que des rendus non liés à ce code soient bloqués pendant le décodage de l'image.

L'utilisation de img.decoding = "async" peut éviter de bloquer l'affichage d'autres contenus si le décodage prend du temps :

const img = new Image();
img.decoding = "async";
img.src = "img/logo.png";
document.body.appendChild(img);

Spécifications

Compatibilité des navigateurs

Voir aussi

• La méthode HTMLImageElement.decode()
• L'attribut decoding de l'élément HTML <img>
• Que fait réellement l'attribut de décodage d'image ? ^(angl.) sur tunetheweb.com (2023)