PerformanceElementTiming: intersectionRect property

Khả dụng hạn chế

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

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

Thuộc tính chỉ đọc intersectionRect của giao diện PerformanceElementTiming trả về hình chữ nhật của phần tử trong viewport.

Giá trị

Một DOMRectReadOnly là hình chữ nhật của phần tử trong viewport.

Đối với hình ảnh hiển thị, đây là hình chữ nhật hiển thị của hình ảnh trong viewport. Đối với văn bản, đây là hình chữ nhật hiển thị của nút trong viewport. Đây là hình chữ nhật nhỏ nhất chứa tất cả các nút văn bản thuộc phần tử.

Ví dụ

Ghi lại `intersectionRect`

Trong ví dụ này, một phần tử <img> đang được quan sát bằng cách thêm thuộc tính elementtiming. Một PerformanceObserver được đăng ký để lấy tất cả các mục hiệu suất loại "element" và cờ buffered được dùng để truy cập dữ liệu từ trước khi trình quan sát được tạo. Gọi entry.intersectionRect trả về một đối tượng DOMRectReadOnly với hình chữ nhật hiển thị của hình ảnh.

html

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