Thuộc tính loading của thẻ HTML <img>
Định nghĩa và cách sử dụng
loading Thuộc tính này quy định trình duyệt có nên tải hình ảnh ngay lập tức hay hoãn tải hình ảnh ngoài màn hình cho đến khi người dùng cuộn gần chúng.
Lưu ý:Chỉ cần thêm loading="lazy" Thêm vào hình ảnh ở dưới màn hình.
Mô hình
Thêm tải chậm cho hình ảnh ở dưới màn hình chính:
<img src="/i/photo/beijing.jpg" alt="北京" style="width:100%"> <img src="/i/photo/shanghai.jpg" alt="上海" style="width:100%"> <!-- Ảnh ngoài màn hình --> <img src="/i/photo/wuhan.jpg" alt="武汉" style="width:100%" loading="lazy"> <img src="/i/photo/shanghai-1.jpg" alt="上海" style="width:100%" loading="lazy"> <img src="/i/photo/shanghai-2.jpg" alt="Thượng Hải" style="width:100%" loading="lazy"> <img src="/i/photo/shanghai-3.jpg" alt="Thượng Hải" style="width:100%" loading="lazy"> <img src="/i/photo/tiyugongyuan.jpg" alt="Thể thao công viên" style="width:100%" loading="lazy">
Cú pháp
<img src="URL" loading="eager|lazy">
Giá trị thuộc tính
| Giá trị | Mô tả |
|---|---|
| eager | Mặc định. Tải ảnh ngay lập tức. |
| lazy | Tải ảnh trễ cho đến khi đáp ứng một số điều kiện. |
Hỗ trợ trình duyệt
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 77.0 | 79.0 | 75.0 | Không hỗ trợ | 64.0 |
