PerformanceElementTiming: intersectionRect-Eigenschaft

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.

Die intersectionRect schreibgeschützte Eigenschaft des PerformanceElementTiming-Interfaces gibt das Rechteck des Elements innerhalb des Viewports zurück.

Wert

Ein DOMRectReadOnly, das das Rechteck des Elements innerhalb des Viewports darstellt.

Für Anzeigebilder ist dies das Anzeigerechteck des Bildes innerhalb des Viewports. Für Text ist dies das Anzeigerechteck des Knotens im Viewport. Dies ist das kleinste Rechteck, das die Vereinigung aller Textknoten enthält, die zu dem Element gehören.

Beispiele

Protokollieren von intersectionRect

In diesem Beispiel wird ein <img>-Element beobachtet, indem das elementtiming-Attribut hinzugefügt wird. Ein PerformanceObserver wird registriert, um alle Leistungseinträge des Typs "element" zu erhalten, und das buffered-Flag wird verwendet, um auf Daten von vor der Erstellung des Observers zuzugreifen. Der Aufruf von entry.intersectionRect gibt ein DOMRectReadOnly-Objekt mit dem Anzeigerechteck des Bildes zurück.

html
<img
  src="image.jpg"
  alt="a nice image"
  elementtiming="big-image"
  id="myImage" />
js
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    if (entry.identifier === "big-image") {
      console.log(entry.intersectionRect);
    }
  });
});
observer.observe({ type: "element", buffered: true });

Spezifikationen

Specification
Element Timing API
# ref-for-dom-performanceelementtiming-intersectionrect

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
intersectionRect
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.