티스토리 뷰
스크롤이 길고 이미지가 많이 쓰이는 사이트의 경우 브라우저에 보이는 영역의 이미지만 동적으로 로딩시켜 초기 로딩 속도를 개선하고 서버의 트래픽을 절감 할 수 있습니다.
사용방법이 간단해서 운영중인 사이트에 적용하기에 무리가 없습니다.
사용방법
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <html> <head></head> <body> <img class="lazy" data-original="img/example.jpg" width="640" heigh="480"> <!-- jquery CDN--> <script src="//code.jquery.com/jquery.min.js"></script> <!-- lazyload 1.9.1 CDN --> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js"></script> <script> $("img.lazy").lazyload({ threshold : 300, //뷰포트에 보이기 300px 전에 미리 로딩 effect : "fadeIn" //효과 }); </script> </body> </html> |
1. 이미지테그 src속성을 지우고 data-original에 이미지 주소 입력
2. 이미지테그에 class명 추가(lazy)
3. jquery 로딩 후 lazyload.js 파일 로딩
4. lazyload 추가 옵션은 아래 사이트에서 확인
배포사이트
http://www.appelsiini.net/projects/lazyload
소스다운로드
https://raw.github.com/tuupola/jquery_lazyload/master/jquery.lazyload.js
압축다운로드
https://raw.github.com/tuupola/jquery_lazyload/master/jquery.lazyload.min.js
CDN주소
http://cdnjs.com/libraries/jquery.lazyload
출처 : http://oops.tistory.com/2
다른 예)
'javascript' 카테고리의 다른 글
| iframe에서 클릭이 생길때 클릭 이벤트를 알아내기 (1) | 2016.04.21 |
|---|---|
| 비율 유지하며 이미지 사이즈 조절하기 (0) | 2016.01.31 |
| Jquery 속도 향상 (2) | 2015.10.29 |
| JQuery Plug-in Group Image (0) | 2015.09.10 |
| 특수문자표 (0) | 2015.08.19 |
댓글