[attribute] HTML - loading 속성 - 이미지 레이지로드 여부 지정 (= loading속성 = 로딩속성) ※ <img> lazyload

1. loading 예제 - 이미지 레이지로드 지정
2. loading 정의
3. loading 구문

loading 예제 - 이미지 레이지로드 지정

 

<img src="/img/a.jpg" alt="A" style="width:100%">

<img src="/img/b.jpg" alt="B" style="width:100%">

 

<!-- 화면 밖 이미지들 -->

<img src="/img/c.jpg" alt="C" style="width:100%" loading="lazy">

<img src="/img/d.jpg" alt="D" style="width:100%" loading="lazy">

<img src="/img/e.jpg" alt="E" style="width:100%" loading="lazy">

<img src="/img/f.jpg" alt="F" style="width:100%" loading="lazy">

<img src="/img/g.jpg" alt="G" style="width:100%" loading="lazy">

 

loading 정의

 

브라우저가 화면 밖 이미지를 즉시 로드할 지 레이지로드(= 사용자가 스크롤 내려서 해당 이미지에 근접 시 로드)할 지 지정하는 속성.

 

---

[특징]

 

• loading 속성 사용 가능 요소: <img>
• 화면에 바로 안 보이는 이미지에만 적용.
• IE 제외한 주요 최신 브라우저 모두 지원.

loading 구문

 

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

 

---

[속성값]

 

eager

이미지 즉시 로드. (기본값)

 

lazy

이미지 레이지 로드. (= 사용자가 스크롤 내려서 이미지 근접 시 로드.)