본문 바로가기

자바스크립트,부트

img lazy loading 적용방법

  웹 사이트에 접속했을 때 해당 페이지에 있는 모든 이미지를 바로 다운 받는게 아니라 사용자가 스크롤을 이동함에 따라서 이미지를 불러오는 방법을 lazy loading 이라고 하는데요. 어떻게 하면 적용할 수 있는지 간단하게 정리해두려고요.

 

  대부분의 브라우저에서 지원하지만 지원하지 않는 브라우저까지 lazy loading을 적용하려면 javascript 라이브러리를 활용하면 됩니다. 많이 쓰는게 https://github.com/aFarkas/lazysizes 라고 하고요. 저는 bower로 받아서 사용했습니다. cdn도 있을테니까 그거 사용하셔도 됩니다. 

 

  1. lazysizes 라이브러리 추가하기

  2. img class에 lazyload 추가하기, src를 data-src로 변경하기

 

  동적으로 이미지 엘리먼트를 생성해서 사용하는 예시코드는 아래와 같습니다. 

var img = document.createElement('img');
img.className = "lazyload";
img.setAttribute('data-src', '.......img/path/.....png');

 

  테스트 결과 스크롤을 쭉 내렸더니 아래 이미지와 같이 lazy loading이 적용된 것을 확인할 수 있었어요.

 

lazy loading 적용 결과

 

  더 자세한 내용은 https://web.dev/native-lazy-loading/  에서 확인하실 수 있습니다.