HTMLImageElement : proprit decoding

Valeur

Une chane de caractres dont la valeur est sync, async, ou auto. Pour leur signification, voir la rfrence HTML <img>.

Exemples

Dans l'exemple ci-dessous, vous obtiendrez probablement une image vide affiche sur la page pendant le tlchargement de l'image. Dfinir decoding ne l'empchera pas.

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

Insrer une image aprs le tlchargement peut rendre la proprit 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 compltement charge !";
document.body.appendChild(p);

Une meilleure solution consiste cependant utiliser la mthode HTMLImageElement.decode() pour rsoudre ce problme. Elle permet de dcoder une image de faon asynchrone, en retardant son insertion dans le DOM jusqu' ce qu'elle soit entirement tlcharge et dcode, vitant ainsi le problme d'image vide mentionn ci-dessus. Ceci est particulirement utile si vous remplacez dynamiquement une image existante par une nouvelle, et cela vite galement que des rendus non lis ce code soient bloqus pendant le dcodage de l'image.

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

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

Spcifications

Compatibilit des navigateurs

Voir aussi

• La mthode HTMLImageElement.decode()
• L'attribut decoding de l'lment HTML <img>
• Que fait rellement l'attribut de dcodage d'image ? (angl.) sur tunetheweb.com (2023)