jQuery 지연 로드 지연 로딩에 대한 자세한 설명

Lazy Load는 JavaScript로 작성된 jQuery 플러그인으로, 긴 페이지의 이미지 로드를 지연시킬 수 있습니다. 사용자가 페이지를 해당 위치로 스크롤할 때까지 브라우저의 표시 영역 외부에 있는 이미지는 로드되지 않습니다. 이미지 사전 로드가 처리되는 방식과 반대입니다.

큰 이미지가 많이 포함된 긴 페이지에서 이미지를 지연 로드하면 표시되는 이미지를 로드한 후 페이지 로드 속도가 빨라질 수 있습니다. 다운그레이드 처리에도 도움이 됩니다.

가로 스크롤

컨테이너 내 가로 스크롤

컨테이너 내 세로 스크롤

있습니다. 페이지에 많은 이미지

5초 후 이미지 로드

AJAX를 사용하여 이미지 로드

사용 방법

Lazy Load에 의존 jQuery. HTML의 끝 부분, 즉 < ;/body> 앞에 다음 코드를 추가하세요.

변경해야 합니다. 이미지의 태그입니다. 이미지의 주소는 data-original 속성에 있어야 합니다. 지연 로딩 이미지에 특정 클래스(예: 지연)를 부여합니다. 이렇게 하면 이미지 플러그인 번들링을 쉽게 수행할 수 있습니다. 코드는 다음과 같습니다.

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

이렇게 하면 게으른 클래스가 있는 모든 이미지의 로드가 지연됩니다.

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

데모. : 기본 옵션

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

임계값 설정

기본적으로 이미지가 화면에 나타날 때 로드됩니다. 이미지를 미리 로드하려는 경우 임계값을 200으로 설정하면 됩니다. 이미지가 화면에서 200픽셀 떨어져 있을 때 로드되도록 합니다.

로드를 트리거하는 이벤트를 설정합니다. 🎜>

클릭, 마우스오버 등의 jQuery 이벤트를 사용할 수 있습니다. sporty 및 foobar와 같은 사용자 정의 이벤트를 사용할 수도 있습니다. 기본값은 사용자가 아래로 스크롤하여 이미지가 뷰포트에 나타날 때까지 기다리는 것입니다. 사용자가 클릭할 때만 이미지 로드:

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

데모: 5초 지연 후 이미지 로드

특수 효과 사용

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

기본적으로 플러그인은 이미지가 완전히 로드될 때까지 기다렸다가 show()를 호출합니다. 원하는 효과를 사용할 수 있습니다. 아래 코드에서는 fadeIn(페이드 인 효과)을 사용합니다.

데모: 페이드 인 효과

JavaScript가 활성화되지 않은 경우

거의 모든 브라우저에서는 JavaScript가 활성화되어 있습니다. 그러나 JavaScript를 지원하지 않는 클라이언트에서는 실제 이미지를 표시하고 싶을 수도 있습니다. 브라우저가 JavaScript를 지원하지 않는 경우에는