PerformanceElementTiming.intersectionRect

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.

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"] });