PerformanceElementTiming.intersectionRect

Disponibilité limitée

Cette fonctionnalité n'est pas Compatible car elle ne fonctionne pas dans certains des navigateurs les plus utilisés.

La propriété en lecture seule intersectionRect de l'interface PerformanceElementTiming renvoie le rectangle de l'élément dans la zone d'affichage (viewport).

Dans cet article

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.

html
<img
  src="image.jpg"
  alt="une belle image"
  elementtiming="big-image"
  id="myImage" />

js
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

Spécification

Element Timing API
# dom-performanceelementtiming-intersectionrect

Compatibilité des navigateurs

Activez JavaScript pour afficher ce tableau de compatibilité des navigateurs.

Aider à améliorer MDN

Cette page vous a-t-elle été utile ?

Oui Non

Apprendre à contribuer

Cette page a été modifiée le 8 août 2024 par les contributeur·ice·s du MDN.

Voir cette page sur GitHub • Signaler un problème avec ce contenu