PerformanceElementTiming: intersectionRect-Eigenschaft
Eingeschränkt verfügbar
Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.
Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.
Die intersectionRect-Eigenschaft des PerformanceElementTiming-Interfaces gibt das Rechteck des Elements innerhalb des Viewports zurück.
Wert
Ein DOMRectReadOnly, welches das Rechteck des Elements innerhalb des Viewports darstellt.
Bei Anzeige von Bildern 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
intersectionRect protokollieren
In diesem Beispiel wird ein <img>-Element beobachtet, indem das elementtiming-Attribut hinzugefügt wird. Ein PerformanceObserver wird registriert, um alle Leistungsdaten vom Typ "element" zu erhalten, und das buffered-Flag wird verwendet, um auf Daten 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
| Spezifikation |
|---|
| Element Timing API # dom-performanceelementtiming-intersectionrect |