Thuộc tính tải HTML <img>
Ví dụ
Thêm tính năng tải chậm vào hình ảnh trong màn hình đầu tiên:
<img src="/w3images/wedding.jpg" alt="Wedding" style="width:100%">
<img
src="/w3images/rocks.jpg" alt="Rocks" style="width:100%">
<!--
off-screen images -->
<img src="/w3images/paris.jpg" alt="Paris"
style="width:100%" loading="lazy">
<img src="/w3images/nature.jpg"
alt="Nature" style="width:100%" loading="lazy">
<img src="/w3images/underwater.jpg"
alt="Underwater" style="width:100%" loading="lazy">
<img src="/w3images/ocean.jpg"
alt="Ocean" style="width:100%" loading="lazy">
<img src="/w3images/mountainskies.jpg"
alt="Mountains" style="width:100%" loading="lazy">
Hãy tự mình thử »Định nghĩa và cách sử dụng
Thuộc tính loading
chỉ định xem trình duyệt nên tải hình ảnh ngay lập tức hay trì hoãn việc tải hình ảnh ngoài màn hình cho đến khi người dùng cuộn đến gần chúng.
Mẹo: Chỉ thêm loading="lazy"
vào những hình ảnh được đặt dưới màn hình đầu tiên.
Hỗ trợ trình duyệt
Attribute | |||||
---|---|---|---|---|---|
loading | 77.0 | 79.0 | 75.0 | Not Supported | 64.0 |
Cú pháp
<img src=" URL " loading="eager|lazy">
Giá trị thuộc tính
Value | Description |
---|---|
eager | Default. Loads an image immediately |
lazy | Defer loading of images until some conditions are met |
❮ Thẻ HTML <img>