[jQuery] Lazy Load 사용하기

---

 보통 웹페이지를 한번 띄우면 페이지 내의 모든 콘텐츠를 가져오기 때문에 화면의 로드가 길어지는 경우가 많습니다.

 때문에 실제로 사용자가 보고 싶은 화면이 아닌 경우에도 (단순히 해당 페이지에 보이는 메뉴를 클릭해서 다른 페이지를 가고 싶은 경우나 스크롤을 내리지 않고 현재 화면에서의 콘텐츠를 클릭하고 싶을 때) 페이지를 기다리게 되고, 또 서버 측면에서는 사용자가 보지 않는 콘텐츠까지 전송해야 하므로 트래픽적으로도 문제가 되는 경우가 많습니다. 특히나 웹보다 저용량으로 제공되어야 하는 모바일에서는 특히나 고려해야 할 대상입니다.

 

 그중에서도 가장 많은 비중을 차지하는게 이미지인데, 이 이미지의 트래픽량을 줄여줄 방안 중 하나가 LazyLoad입니다.

 이는 이미지가 현재 화면에 노출되어야 하는 경우에만 서버에서 가져오도록 하는 기술 중 하나입니다.

 

 기본적으로 jQuery의 Plug-in이기 때문에 jQuery가 사전에 정의되어야 한다.

 

기능: LazyLoad

내용: 스크롤된 영역만 이미지 로드되도록 하여 부하를 줄이는 기술

---

사용방법

1. 선언

<script src="jquery.lazy.min.js" type="text/javascript"></script>

http://jquery.eisbehr.de/lazy/

Delayed Content, Image and Background Lazy Loader

 

2. 대상지정

<img class="lazy" data-original="img/example.jpg" width="640" height="480">

 

3. jQuery 적용

 $(function() {
    $('.lazy').Lazy();
});

 

옵션	내용	사용 예
thresold	이미지가 100픽셀 이상 로딩된 시점부터 이미지를 보인다	thresold:100
placeholder	이미지가 로딩중인 경우 해당이미지를 보인다	placeholder:'이미지경로'
effect	이미지가 보여질때 사용할 효과를 적용	effect:'fadeIn'
onError	해당 이미지를 불러오다 오류가 발생한 경우 이벤트	onError:function(ele){}

    $('.lazy').Lazy({
        // your configuration goes here
        thresold : 100,
        placeholder : '이미지경로',
        effect: 'fadeIn',
        onError: function(element) {
            console.log('error loading ' + element.data('src'));
        }
    });

 

---

관련 사이트

http://jquery.eisbehr.de/lazy/

Delayed Content, Image and Background Lazy Loader

---

[jQuery] How to use Lazy Load

🇺🇸 English

2024.02.12 - [개발 창고/Web] - [jQuery] How to use Lazy Load

[jQuery] How to useLazy Load