Lazy loading là một kỹ thuật tải ảnh và nội dung trang web một cách trì hoãn, chỉ khi người dùng cuộn trang đến phần nội dung đó. Điều này giúp giảm tải trọng ban đầu của trang web và cải thiện thời gian tải trang.


Để sử dụng lazy loading cho hình ảnh, bạn có thể sử dụng thuộc tính loading với giá trị là "lazy" trong thẻ <img>. Điều này sẽ cho phép trình duyệt tự động tải ảnh khi nó nằm trong tầm nhìn của người dùng.


Ví dụ:


html
<img src="duong_dan_den_hinh_anh.jpg" loading="lazy" alt="Mô tả hình ảnh">

Khi sử dụng lazy loading, hình ảnh sẽ không được tải ngay lập tức khi trang web được tải, mà chỉ được tải khi người dùng cuộn trang đến vị trí chứa hình ảnh. Điều này giúp giảm thời gian tải trang ban đầu và tiết kiệm băng thông mạng.


Ngoài ra, bạn cũng có thể sử dụng các thư viện JavaScript như "Intersection Observer" để thực hiện lazy loading cho cả hình ảnh và các phần nội dung khác trên trang web.


Thư viện này cung cấp các phương pháp linh hoạt để tải nội dung khi nó nằm trong tầm nhìn của người dùng.