https://vantaisieutoc.vn/assets/js/lazy.js?v=ky5fmGsbXV

1document.addEventListener("DOMContentLoaded", function () {
2    let timeout = null;
3    let lazyImgList = document.querySelectorAll('img.lazy-load');
4    const windowHeight = window.innerHeight; // độ cao màn hình
5
6    const lazyLoadImage = () => {
7      // áp dụng kỹ thuật debounce để giảm số lần thực thi hàm khi scroll
8      if (timeout) {
9        clearTimeout(timeout);
10      }
11
12      timeout = setTimeout(() => {
13        const windowYOffset = window.pageYOffset; // vị trí scroll hiện tại
14
15        lazyImgList.forEach((img, index) => {
16          // Load ảnh khi ảnh bước vào khung nhìn màn hình
17          if (img.offsetTop <= windowYOffset + windowHeight) {
18            img.src = img.dataset?.src; // Chép link ảnh qua thuộc tính src
19            img.classList.remove('lazy-load');
20          }
21        });
22
23        lazyImgList = document.querySelectorAll('img.lazy-load'); // Cập nhật lại list
24        // Xoá event khi đã load tất cả các ảnh
25        if (lazyImgList.length === 0) {
26          document.removeEventListener('scroll', lazyLoadImage);
27          return;
28        }
29      }, 30);
30    }
31
32    lazyLoadImage(); // load lần đầu nếu ảnh ở trên cùng trước khi người dùng scroll
33    lazyImgList.length && document.addEventListener('scroll', lazyLoadImage);
34})