PerformanceElementTiming.intersectionRect
La propriété en lecture seule intersectionRect
de l'interface PerformanceElementTiming
renvoie le rectangle de l'élément dans la zone d'affichage (viewport).
Syntaxe
var rect = PerformanceElementTiming.intersectionRect;
Valeur
Un objet DOMRectReadOnly
qui est le rectangle de l'élément dans la zone d'affichage.
Pour les images, il s'agit du rectangle d'affichage de l'image dans la zone d'affichage. Pour le texte, il s'agit du rectangle d'affichage du nœud dans la zone d'affichage. Il s'agit du plus petit rectangle qui contient l'union de tous les nœuds de texte appartenant à l'élément.
Exemples
Dans cet exemple, l'appel à entry.intersectionRect
renvoie un objet DOMRectReadOnly
avec le rectangle d'affichage de l'image.
<img
src="image.jpg"
alt="une belle image"
elementtiming="big-image"
id="myImage" />
const observer = new PerformanceObserver((list) => {
let entries = list.getEntries().forEach(function (entry) {
if (entry.identifier === "big-image") {
console.log(entry.intersectionRect);
}
});
});
observer.observe({ entryTypes: ["element"] });
Note : Cet exemple utilise l'interface PerformanceObserver
pour créer une liste d'événements de mesure des performances. Dans notre cas, nous observons l'élément PerformanceEntry.entryType
afin d'utiliser l'interface PerformanceElementTiming
.
Spécifications
Specification |
---|
Element Timing API # ref-for-dom-performanceelementtiming-intersectionrect |
Compatibilité des navigateurs
BCD tables only load in the browser