HTML <img> loading 속성

HTML <img> 태그

정의와 사용법

loading 속성은 브라우저가 이미지를 즉시 로드해야 하는지 아니면 화면 밖의 이미지를 로드를 연기해야 하는지 정의합니다. 예를 들어, 사용자가 이들을 가까이로 스크롤할 때까지는 로드를 연기합니다.

알림:아래의 loading="lazy" 화면 아래에 있는 이미지에 추가하십시오。

예제

처음 화면 아래의 이미지에 지연 로드 추가하십시오：

<img src="/i/photo/beijing.jpg" alt="北京" style="width:100%">
<img src="/i/photo/shanghai.jpg" alt="上海" style="width:100%">
<!-- 화면 밖의 이미지 -->
<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="상해" style="width:100%" loading="lazy">
<img src="/i/photo/shanghai-3.jpg" alt="상해" style="width:100%" loading="lazy">
<img src="/i/photo/tiyugongyuan.jpg" alt="스포츠 공원" style="width:100%" loading="lazy">

직접 시험해 보세요

문법

<img src="URL" loading="eager|lazy">

속성 값

값 설명
eager 기본 설정. 즉시 이미지를 로드합니다.
lazy 어떤 조건을 만족시키면 이미지를 지연 로드합니다.

브라우저 지원

크롬 에지 파이어폭스 사파리 오페라
크롬 에지 파이어폭스 사파리 오페라
77.0 79.0 75.0 지원하지 않음 64.0

HTML <img> 태그