Intersection Observer

Lazy loading bằng JavaScript với toàn quyền kiểm soát

Hỗ Trợ Trình Duyệt

Cách hoạt động

API IntersectionObserver kích hoạt callback khi một phần tử vào hoặc rời khỏi viewport. Ta dùng điều này để trigger việc tải ảnh chỉ khi ảnh sắp hiển thị.

Điều này cho phép toàn quyền kiểm soát ngưỡng tải, animation và xử lý lỗi.

Điều Khiển

0 Đã Tải
20 Tổng
20 Request Tiết Kiệm
ON Lazy Loading

Cấu Hình Observer

Cách Kiểm Tra

  1. Mở DevTools (F12) → tab Network
  2. Tải lại trang để xóa cache
  3. Cuộn xuống để xem ảnh tải với animation fade-in
  4. Thay đổi cấu hình Observer để thấy hành vi khác nhau
  5. Bật/tắt lazy loading để so sánh tải toàn bộ vs lazy