# 크롬 76버전부터 img 와 iframe의 native lazy loading 지원

> Clean Markdown view of GeekNews topic #278. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=278](https://news.hada.io/topic?id=278)
- GeekNews Markdown: [https://news.hada.io/topic/278.md](https://news.hada.io/topic/278.md)
- Type: news
- Author: [xguru](https://news.hada.io/@xguru)
- Published: 2019-08-09T19:04:17+09:00
- Updated: 2019-08-09T19:04:17+09:00
- Original source: [web.dev](https://web.dev/native-lazy-loading)
- Points: 4
- Comments: 0

## Topic Body

태그에 loading="lazy" 붙이면, 화면에 보여지는 시점에 이미지 또는 프레임의 내용 불러오기 시작.

주변 콘텐츠가 reflowing 되는걸 방지하기 위해 height,width 는 붙여주는게 좋음

iframe 의 경우는 크기가 4px 이하거나, display:non 또는 visibility : hidden, 절대좌표로 x,y가 화면을 벗어나는 경우를 제외하고는 화면에 보일때 로딩시작. ( 통계 또는 통신목적의 iframe 이 lazy loading 되는것을 방지 )

현재는 css background 이미지는 불가.

아직 타브라우저 지원은 없는 상태이므로, if 문을 통해 타 lazy loading library 작성 필요.

## Comments



_No public comments on this page._