Lazy loading là một kỹ thuật tối ưu hóa hiệu suất của trang web hoặc ứng dụng bằng cách trì hoãn việc tải các tài nguyên (như hình ảnh, video, hoặc script) cho đến khi chúng thực sự cần thiết. Điều này có nghĩa là thay vì tải toàn bộ nội dung của trang web ngay lập tức, chỉ những phần hiển thị trên màn hình (trong viewport) mới được tải ngay lập tức. Các phần còn lại sẽ được tải khi người dùng cuộn xuống hoặc thực hiện hành động yêu cầu chúng.

Lợi ích của lazy loading:

• Cải thiện tốc độ tải trang: Bằng cách chỉ tải những tài nguyên cần thiết ban đầu, trang web sẽ tải nhanh hơn, cải thiện trải nghiệm người dùng.

• Giảm băng thông: Lazy loading giúp giảm lượng dữ liệu cần tải xuống ngay lập tức, tiết kiệm băng thông cho cả server và người dùng.

• Tăng hiệu suất trang: Khi tải ít tài nguyên hơn, trình duyệt sẽ xử lý trang web nhanh hơn, giảm tải cho hệ thống và cải thiện thời gian phản hồi.

Kỹ thuật này đặc biệt hữu ích trên các trang web có nhiều hình ảnh, video hoặc nội dung động khác.

Dưới đây là một ví dụ đơn giản về việc sử dụng kỹ thuật Lazy loading cho hình ảnh trong HTML bằng cách sử dụng thuộc tính loading="lazy":

`

Lazy Loading Images

<!-- Image 1: Lazy Loaded -->
<img src="large-image1.jpg" alt="Large Image 1" loading="lazy" width="600" height="400">

<!-- Image 2: Lazy Loaded -->
<img src="large-image2.jpg" alt="Large Image 2" loading="lazy" width="600" height="400">

<!-- Image 3: Eager Loaded (default behavior, not lazy loaded) -->
<img src="large-image3.jpg" alt="Large Image 3" width="600" height="400">

<p>Scroll down to see the images load as you reach them.</p>

Giải thích:#

• Thuộc tính loading="lazy": Thuộc tính này được thêm vào các thẻ <img> để kích hoạt lazy loading. Trình duyệt sẽ chỉ tải hình ảnh khi chúng gần được cuộn tới trong viewport.

• Image 3 (Không sử dụng Lazy loading): Hình ảnh này không có thuộc tính loading="lazy", nên nó sẽ được tải ngay khi trang được tải.

Sử dụng JavaScript để triển khai Lazy loading:#

Nếu bạn muốn có nhiều kiểm soát hơn, bạn có thể sử dụng JavaScript để triển khai Lazy loading:

`

Lazy Loading Images with JavaScript

<img data-src="large-image1.jpg" alt="Large Image 1" width="600" height="400">
<img data-src="large-image2.jpg" alt="Large Image 2" width="600" height="400">
<img data-src="large-image3.jpg" alt="Large Image 3" width="600" height="400">

<p>Scroll down to see the images load as you reach them.</p>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        const lazyImages = document.querySelectorAll('img[data-src]');
        const imageObserver = new IntersectionObserver((entries, observer) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    const img = entry.target;
                    img.src = img.getAttribute('data-src');
                    img.removeAttribute('data-src');
                    observer.unobserve(img);
                }
            });
        });

        lazyImages.forEach(img => {
            imageObserver.observe(img);
        });
    });
</script>

Giải thích:#

• data-src Attribute: Thay vì dùng thuộc tính src để đặt URL của ảnh ngay lập tức, ta dùng data-src để lưu trữ URL.

• Intersection Observer: JavaScript sử dụng IntersectionObserver để phát hiện khi một phần tử (ảnh) gần được hiển thị trên màn hình, và lúc đó mới thay đổi thuộc tính src để tải ảnh.

• Lazy Loading: Khi ảnh đi vào viewport, ảnh sẽ được tải và hiển thị. Sau khi tải xong, ảnh sẽ không còn được giám sát bởi IntersectionObserver nữa.

Cả hai phương pháp trên đều giúp tối ưu hóa hiệu suất trang web bằng cách trì hoãn việc tải ảnh cho đến khi cần thiết.