HTML <img> 로드 속성
예시
스크롤 없이 볼 수 있는 이미지에 지연 로드를 추가합니다.
<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">
정의 및 사용
속성 은 loading
브라우저가 이미지를 즉시 로드해야 하는지 또는 예를 들어 사용자가 이미지 근처로 스크롤할 때까지 오프스크린 이미지 로드를 연기해야 하는지 여부를 지정합니다.
팁:loading="lazy"
접힌 부분 아래에 있는 이미지에만 추가 하세요.
브라우저 지원
Attribute | |||||
---|---|---|---|---|---|
loading | 77.0 | 79.0 | 75.0 | Not Supported | 64.0 |
통사론
<img src="URL" loading="eager|lazy">
속성 값
Value | Description |
---|---|
eager | Default. Loads an image immediately |
lazy | Defer loading of images until some conditions are met |
❮ HTML <img> 태그