PerformanceElementTiming: свойство intersectionRect

Чтение только свойство intersectionRect интерфейса PerformanceElementTiming возвращает прямоугольник элемента в пределах viewport.

A DOMRectReadOnly, представляющий прямоугольник элемента в пределах viewport.

Для отображаемых изображений это прямоугольник отображения изображения в пределах viewport. Для текста это прямоугольник отображения узла в пределах viewport. Это наименьший прямоугольник, содержащий объединение всех текстовых узлов, принадлежащих элементу.

В этом примере элемент <img> наблюдается путем добавления атрибута elementtiming. Регистрируется наблюдатель PerformanceObserver для получения всех записей производительности типа "element" и используется флаг buffered для доступа к данным до создания наблюдателя. Вызов entry.intersectionRect возвращает объект DOMRectReadOnly с прямоугольником отображения изображения.

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