이미지를 즉시 로드할지 아니면 필요할 때 로드할지에 대한 힌트를 웹브라우저에게 제공한다.
설정 가능한 값은 다음과 같다.
eager
: 기본값으로 <img>
요소가 생성되는 즉시 지정된 이미지를 로드한다.lazy
: 필요하다고 판단될 때 이미지를 로드한다. 즉 뷰포트에 보여지지 않는 이미지들은 로드를 보류했다가 화면 스크롤을 통해 이미지가 뷰포트에 들어오기 직전에 로드한다. 최적화 작업에 활용할 수 있다.load
이벤트의 발생 시점은 이미지 리소스를 완전히 가져오는 것 까지 포함한 시간이지만 lazy
지정이 load
이벤트 발생 시점을 더 지연시키지 않는다. 오히려 뷰포트 밖의 이미지 로딩 시간이 발생하지 않으므로 초기 load
이벤트 발생 시점이 더 빨라질 수 있다.
src
프로퍼티보다 먼저 정의되어야 올바르게 동작한다. htmlImageElement.loading
분류 | 값 | 설명 |
---|---|---|
writable | yes |