HTMLImageElement : propriété fetchPriority
Baseline
2024
Newly available
Depuis October 2024, cette fonctionnalité fonctionne sur les appareils et les versions de navigateur les plus récents. Elle peut ne pas fonctionner sur les appareils ou navigateurs plus anciens.
La propriété fetchPriority de l'interface HTMLImageElement représente une indication pour le navigateur sur la façon de prioriser le chargement d'une image particulière par rapport aux autres images.
Elle reflète l'attribut fetchpriority de l'élément HTML <img> correspondant.
Cette propriété permet à un·e développeur·euse d'indiquer que le chargement d'une image spécifique, tôt dans le processus de chargement, a plus ou moins d'impact sur l'expérience utilisateur·ice que ce que le navigateur pourrait déduire en attribuant une priorité interne. Cela permet au navigateur d'augmenter ou de diminuer la priorité, et potentiellement de charger l'image plus tôt ou plus tard qu'il ne l'aurait fait autrement. La propriété doit être utilisée avec parcimonie, car une priorisation excessive ou incorrecte peut dégrader les performances.
La priorité de chargement peut compléter le préchargement, permettant à un·e développeur·euse d'augmenter la priorité par rapport à des ressources moins importantes qui auraient une priorité par défaut plus élevée.
Par exemple, si un·e développeur·euse sait qu'une image contribue significativement au rendu du contenu le plus volumineux (LCP) du site, il·elle peut ajouter <link rel="preload"> pour l'image puis augmenter encore la priorité avec la propriété fetchpriority.
Notez que la priorité interne de toute opération de chargement, ainsi que l'impact de fetchPriority sur cette priorité, dépendent entièrement du navigateur.
Valeur
Une chaîne de caractères représentant l'indication de priorité. Les valeurs possibles sont :
high-
Charger l'image avec une priorité élevée par rapport aux autres images ayant la même priorité interne.
low-
Charger l'image avec une priorité faible par rapport aux autres images ayant la même priorité interne.
auto-
Ne pas définir de préférence utilisateur·ice pour la priorité de chargement. C'est la valeur par défaut, utilisée si aucune valeur n'est définie ou si une valeur invalide est définie.
Exemples
const img = new Image();
img.fetchPriority = "high";
img.src = "img/logo.png";
Spécifications
| Specification |
|---|
| HTML # dom-img-fetchpriority |
Compatibilité des navigateurs
Chargement…
Voir aussi
HTMLLinkElement.fetchPriorityHTMLScriptElement.fetchPriority- L'en-tête HTTP
Link - Optimiser le chargement des ressources avec l'API Fetch Priority (angl.) pour plus d'informations sur l'impact de cette API sur les priorités dans Chrome.