웹브라우저에서 이미지를 화면에 나올 때 로딩하는 방법

이미지가 많은 웹페이지를 가져오기 위해서는 시간이 많이 소요된다. 그 이유는 이미지 용량이 크기 때문에 이미지 전체를 불러 오려면 페이지 열리는 속도가 느려지게 된다.

웹페이지를 빠르게 로딩하기 위해서 이미지를 웹브라우저에 나타날 때 불러오게 해야 한다. 그 방법은 img 태그에 속성을 추가해주면 된다.

<img src="" loading="lazy"/>

img 태그에 loading 속성을 추가해주면 된다. lazy값을 주게 되면 웹브라우저에서 해당 이미지가 노출될 때 이미지를 불러 오게 돼서 처음 웹페이지가 열렸을 때 이미지를 전부 불러오지 않기 때문에 빠르게 웹페이지를 열 수 있다.