jQuery Lazy 웹사이트

이미지의 레이지 로딩을 할 수 있도록 하는 제이쿼리 플러그인입니다.

레이지 로딩이란 인터넷이 느린 환경에서 브라우저가 HTML 컨텐츠를 로딩하는 과정에서 이미지를 같이 로딩에 포함시켜 먹통이 되는 것을 방지하기 위하여, 이미지 데이터를 제외한 HTML을 우선적으로 렌더링한 뒤 이미지는 HTML 로딩이 끝난 후 나중에 불러오는 것을 뜻합니다.

이 플러그인을 사용하면 스크롤을 해서 이미지 영역이 화면에 표시될 때에만 이미지를 로딩하므로 트래픽도 절약할 수 있습니다.

1. 제이쿼리 스크립트 밑에 다음의 스크립트를 추가합니다.
<!-- cdnjs -->
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery.lazy/1.7.9/jquery.lazy.min.js"></script>

 

2. 이미지 태그에서 data-src 속성을 추가한 뒤 실제 로딩할 이미지 주소를 입력합니다. 만약 이미 태그가 있다면, 기존의 srcdata-src로 변경합니다. 그리고 src에는 로딩 이미지를 넣습니다.
3. 다음 클래스에 고유의 레이지 로딩 식별자 (예: lazy-img)를 추가합니다.
<img class="lazy-img" data-src="https://website.con/resources/actual-image.jpg" src="./img/loading.gif">

 

4. 스크립트 실행 부분의 처음에 다음 코드를 추가합니다. 주의할 점은 실행함수의 L은 대문자 L 입니다.
$(document).ready(function() {
    $(".lazy-img").Lazy()
});

기본 코드만으로도  대부분의 상황을 커버할 수 있습니다.

추가 옵션을 설정하려면 다음과 같이 사용합니다.

$('.lazy').Lazy({
    // 설정 부분 입력
    scrollDirection: 'vertical',
    effect: 'fadeIn',
    visibleOnly: true,
    onError: function(element) {
        console.log('error loading ' + element.data('src'));
    }
});

참고: 자바스크립트: IntersectionObserver (1) 이미지 lazy-loading 구현


문의 | 코멘트 또는 ayaysir0@naver.com  donaricano-btn

카테고리: WEB: Frontend

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다