LazyImageLoader.js(점진적 이미지 로딩)

LazyImageLoader.js

얼마전 @niceaji님을 통해 알게 된 Jquery 확장 기능인 LazyLoad.js를 테스트 해보니 몇가지 버그가 존재하는것을 발견하였습니다.

@niceaji 님의 포스트: http://uix.kr/archives/1088

코드 전체를 분석해 보지는 않았지만, 핵심 기능인 가시거리(좌표)내의 이미지 로딩이 제대로 되지 않는 버그가 존재 했으며,(가시거리 수치가 잘못 계산된 탓인지? 로딩 시 수치 밖의 이미지까지 로딩되는 버그.) 또한 IE 브라우저에서는 스크립트 오류가 발생하기도 했습니다.(오류는 발생하지만 기능은 정상적으로 수행됩니다;;;)

아래는 해당 기능(점진적 로딩)과 몇 가지 기능을 추가하여, 재 작성된 소스 코드 링크 및 사용 방법 입니다.

1. jsbin 소스 링크:

http://jsbin.com/owayim/11/edit

2. 모듈 사용방법

LazyImageLoader({
        onload: function (e, elem) {
            //alert(elem);
        },
        onerror: function (e, elem) {
        },
        loadingImage: '',
        loadIntervalTime: 30
    });

onload: 각 이미지 로딩 시 이벤트 핸들러

onerror: 각 이미지 로딩 에러 시 이벤트 핸들러

loadingImage: 각 이미지 로딩 전 Default 이미지 경로

loadIntervalTime: 각 이미지 로딩 시간 간격

3. <img> 태그 정의

<img data-name="lazy" data-src="http://img.vaanonline.co.kr/upload/screenshot/120705/120705adiifqytcrimqb.jpg" />
<img data-name="lazy" data-src="http://img.vaanonline.co.kr/upload/screenshot/120705/120705adiifqytcrimb.jpg" />
<img data-name="lazy" data-src="http://img.vaanonline.co.kr/upload/screenshot/120705/120705adiifqytcrimqb.jpg" />
<img data-name="lazy" data-src="http://img.vaanonline.co.kr/upload/screenshot/120705/120705adiifqytcrimqb.jpg" />

data-name: "lazy"

data-src: 대치 이미지 경로