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, bevor Sie diese produktiv verwenden.
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.
<img
src="image.jpg"
alt="a nice image"
elementtiming="big-image"
id="myImage" />
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
BCD tables only load in the browser