[lazy load] 이미지 로딩을 지연시켜주는 이미지 플러그인

[lazy load] 이미지 로딩을 지연시켜주는 이미지 플러그인

lazy는 게으른, 느릇한, 여유로운을 뜻하는 형용사입니다. 

단어의 뜻 그대로 lazyload는 게으른 이미지 로딩 플러그인을 뜻하는데요. 

즉 lazy load plugin은 화면에 보이는 영역의 이미지만 동적으로 로딩시켜 페이지의 로딩속도 향상, 

서버의 트래픽 절감 시켜주는 효과를 주는 이미지 플러그인입니다. 

말로 설명하자니 뭔가 체감이 안되실텐데요. 먼저 예제 사이트를 보시죠.

http://appelsiini.net/projects/lazyload/fadein/

해당 사이트처럼 이미지들이 전부 나오는게 아니라 이미지가 보고 있는 영역에 도달해야지만 로딩이 되게끔 보여지고 있습니다. 

세팅하는 방법도 무척 단순하죠. 아래 URL로 들어가시면 플러그인을 받을 수 있는 github 다운로드 페이지가 뜹니다. 

페이지에서 해당 파일을 다운받아주세요. 페이지가 열리지 않는다면 여기서 다운받아주세요.

https://plugins.jquery.com/lazyload/

jquery.lazyload.min.js

파일을 받으셨다면 jquery.lazyload.min.js 파일을 폴더에 넣고 아래 스크립트를 </head> 안의 ctrl+c, ctrl+v 해주세요.

<script src="jquery.lazyload.min.js"></script>

html 안의 이미지를 넣을 부분에 class를 lazy라고 표기해주세요. (이미지들은 가지고 계신 이미지들을 넣어주시면 됩니다.)

<img class="lazy" src="...">
<img class="lazy" src="...">
<img class="lazy" src="...">

마지막으로 lazyload를 실행시키기 위한 스크립트를 넣어주면 완성입니다.

$("img.lazy").lazyload({
	effect : "fadeIn"
});

참조 :  http://appelsiini.net/projects/lazyload/

이 글을 올린 지가 2017년이었는데 덧글이 달려있어 오랜만에 확인해보니 

버전이 업데이트 되서 작동을 하지 않는 이슈가 있었다는 걸 뒤늦게 알게 되었습니다 ㅠㅠ

버전 1.8.2의 lazyload 플러그인 내용으로 수정된 파일과 변경된 페이지를 공유드립니다. 내용 참고 부탁드립니다.

https://appelsiini.net/projects/lazyload/