HTMLIFrameElement : propriété loading
Baseline
2023
Newly available
Depuis December 2023, 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é loading de l'interface HTMLIFrameElement est une chaîne de caractères qui fournit une indication à l'agent utilisateur pour savoir si l'élément HTML <iframe> doit être chargée immédiatement au chargement de la page, ou seulement lorsqu'elle est nécessaire.
Cela peut être utilisé pour optimiser le chargement du contenu du document. Les cadres intégrés (iframe en anglais) visibles lors du chargement de la page peuvent être téléchargés immédiatement (de façon anticipée), tandis que les cadres intégrés susceptibles d'être hors écran au chargement initial peuvent être téléchargés de façon différée — juste avant qu'elles n'apparaissent dans la zone d'affichage visuelle de la fenêtre.
Valeur
Une chaîne de caractères fournissant une indication à l'agent utilisateur sur la meilleure façon de planifier le chargement du cadre intégré. Les valeurs possibles sont :
Notes d'utilisation
JavaScript doit être activé
Le chargement n'est différé que lorsque JavaScript est activé, quelle que soit la valeur de cette propriété.
Il s'agit d'une mesure anti-pistage, car si un agent utilisateur prenait en charge le chargement différé lorsque le script est désactivé, il serait toujours possible pour un site de suivre la position approximative de défilement d'un·e utilisateur·ice tout au long d'une session, en plaçant stratégiquement des cadres intégrés (iframe en anglais) dans le balisage d'une page de sorte qu'un serveur puisse suivre combien sont demandés et quand.
Moment de l'évènement load
L'évènement load est déclenché lorsque le document a été entièrement traité.
Les cadres intégrés (iframe en anglais) chargés de façon différée n'affectent pas le moment de l'évènement load même si le cadre intégré est dans la zone d'affichage visuelle et est donc récupéré au chargement de la page.
Tous les cadres intégrés chargés de façon anticipée dans le document doivent être récupérés avant que l'évènement load puisse être déclenché.
Exemples
L'exemple ci-dessous montre comment définir un cadre intégré (iframe en anglais) à chargement différé puis l'ajouter à un <div> dans le document.
Le cadre ne sera alors chargé que lorsqu'il sera sur le point de devenir visible.
// Définir une iframe avec chargement différé
const iframe = document.createElement("iframe");
iframe.src = "https://example.com";
iframe.width = 320;
iframe.height = 240;
iframe.loading = "lazy";
// Ajouter à un élément div avec la classe frameDiv
const frameDiv = document.querySelector("div.frameDiv");
frameDiv.appendChild(iframe);
Spécifications
| Specification |
|---|
| HTML # dom-iframe-loading |
Compatibilité des navigateurs
Voir aussi
- L'élément HTML
<iframe> - Apprendre : Performance web
- Chargement différé dans le guide de performance web MDN
- Il est temps de charger en différé les cadres intégrés hors écran ! (angl.) sur web.dev