웹 | 이미지 지연로딩
페이지 정보
작성자 이창민 조회20,098회 댓글0건본문
<!-- cdnjs -->
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery.lazy/1.7.9/jquery.lazy.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery.lazy/1.7.9/jquery.lazy.plugins.min.js"></script>
<script type="text/javascript">
<!--
$(function() {
$('.lazy').Lazy({
scrollDirection: 'vertical',
effect: 'fadeIn',
visibleOnly: true,
onError: function(element) {
console.log('error loading ' + element.data('src'));
}
});
});
//-->
</script>
<img alt="" width="200" height="150" style="border: 1px solid rgb(221, 221, 221); display: inline;" class="lazy" data-src="http://www.dmonster.co.kr/data/file/portfolio/thumb-1889792758_koAF1dCN_fitfree_small_322x241.jpg" title="">
img 태그에 class="lazy" 선언하시고 기존 src 는 삭제
data-src="" 에 기존 이미지url 을 넣으면 됩니다.
위에 스크립트는 스크롤시에 이미지로딩이 될 수 있도록 했습니다.
디몬스터에 적용되었습니다.