이미지의 지연 로딩 및 jquery.lazyload.js의 사용 예-JS 튜토리얼-php.cn

프로젝트에서 이미지 지연 로딩이 가끔 사용되는데, 지연 로딩의 이점은 무엇인가요?

두 가지 주요 사항이 있다고 생각합니다. 첫 번째는 큰 이미지가 많이 포함된 긴 페이지에서 이미지 로딩을 지연시키는 것이 페이지 로딩 속도를 높일 수 있다는 것입니다. 두 번째는 서버의 부하를 줄이는 데 도움이 된다는 것입니다.

다음에서는 일반적으로 사용되는 지연 로딩 플러그인 jquery.lazyload.js와 지연 로딩 플러그인 구현 방법을 소개합니다.

1: jquery.lazyload.js 플러그인

lazyload는 jQuery로 작성된 지연 로딩 플러그인입니다. 브라우저의 표시 영역 외부에 있는 이미지는 사용자가 페이지를 해당 위치로 스크롤할 때까지 로드되지 않습니다. . 이는 이미지와 유사합니다. 사전 로드는 정확히 반대 방식으로 처리됩니다.

구현 원리

첫째, 선택한 img 요소는 표시 이벤트(img를 처리하여 실제 이미지 주소를 표시하는 작업)에 바인딩되므로 향후 조건이 충족될 때 이벤트가 트리거될 수 있습니다. 구성 개체의 컨테이너 속성 구성은 기본적으로 window입니다. img 요소가 컨테이너 컨테이너 뷰포트에 있으면 나타나는 이벤트가 트리거됩니다.

img 요소가 컨테이너 컨테이너 뷰포트 범위에 있는지 확인하려면 다음이 필요합니다.

$.belowthefold = function(element, settings) {};    // 在视口下方$.rightoffold = function(element, settings) {};        // 在视口右方$.abovethetop = function(element, settings) {};        // 在视口上方$.leftofbegin = function(element, settings) {};        // 在视口左方

로그인 후 복사

특정 용도

1. 페이지 소개 방법

lazyload는 jquery를 사용하므로 모든 페이지에 다음과 같이 jquery를 도입해야 합니다.

<script src="jquery.js?1.1.11"></script><script src="jquery.lazyload.js?1.1.11"></script>

로그인 후 복사

기본 작성 방법:

<img class="lazy" data-original="img/example.jpg" width="640" height="480">$(function() {
    $("img.lazy").lazyload();
});

로그인 후 복사

data-original 속성은 실제 이미지 URL 경로를 저장합니다.

팁: CSS에서 이미지의 너비나 높이를 설정해야 합니다. 그렇지 않으면 플러그인이 제대로 작동하지 않을 수 있습니다.

임계값 설정

기본적으로 이미지가 화면에 나타날 때 로드됩니다. 이미지를 미리 로드하고 싶다면 임계값 옵션을 200으로 설정하여 이미지를 로드할 수 있습니다. 화면에서 200픽셀 떨어져 있으면 앞으로 이동합니다.

$("img.lazy").lazyload({
    threshold : 200});

로그인 후 복사

로드를 트리거하도록 이벤트 설정

이벤트는 click 및 mouseover와 같은 모든 jQuery 이벤트일 수 있습니다. 또한 sporty 및 foobar와 같은 사용자 정의 이벤트를 사용할 수도 있습니다. 사용자가 창에서 이미지 위치로 스크롤할 때까지 회색 자리 표시자 이미지를 클릭하기 전에 이미지가 로드되지 않도록 하려면 다음을 수행할 수 있습니다.

$("img.lazy").lazyload({
    event : "click"});

로그인 후 복사

물론 다음 방법을 사용하여 구현할 수도 있습니다. 지연 로딩:

$(function() {
    $("img.lazy").lazyload({
        event : "sporty"});
});

$(window).bind("load", function() {var timeout = setTimeout(function() {
        $("img.lazy").trigger("sporty")
    }, 5000);
});

로그인 후 복사

페이지가 로드된 후 5초 후에 이미지 지연 로딩을 수행합니다.

지연 로딩 효과

이미지가 완전히 로드되면 플러그인은 기본적으로 show() 메서드를 사용하여 이미지를 표시합니다. 실제로 다음 코드에서 사용하는 특수 효과를 사용할 수 있습니다. FadeIn 효과:

$("img.lazy").lazyload({
    effect : "fadeIn"});

로그인 후 복사

JavaScript를 지원하지 않는 브라우저를 사용하는 방법