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를 지원하지 않는 경우에는 2b0b25ff593c5b6c03403dd6234ffb2c 태그에 실제 이미지 조각을 작성할 수 있습니다.

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

CSS를 통해 자리 표시자를 숨길 수 있습니다.

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

JavaScript를 지원하는 브라우저에서는 DOM이 준비되면 자리 표시자를 표시해야 하며, 이는 플러그인이 초기화되는 동시에 수행할 수 있습니다.

$("img.lazy") .show().lazyload();

.lazy {
 display: none;
}

그림이 컨테이너 안에 있습니다

스크롤 막대가 있는 DIV 요소와 같이 스크롤 가능한 컨테이너의 그림에 플러그인을 사용할 수 있습니다. 컨테이너를 jQuery 객체로 정의하고 이를 초기화 메소드에 매개변수로 전달하기만 하면 됩니다.

데모: 컨테이너에서 가로 스크롤, 컨테이너에서 세로 스크롤

이미지가 불연속적입니다

페이지를 스크롤할 때 Lazy Load는 로드된 이미지를 반복하면서 이미지가 표시 영역 내에 있는지 확인합니다. 기본적으로 첫 번째 이미지를 찾으면 반복이 중지됩니다. 이미지는 스트리밍 방식으로 배포되는 것으로 간주됩니다. 예, 페이지의 이미지 순서는 HTML 코드의 순서와 동일하지만 일부 레이아웃에서는 그렇지 않습니다. true 그러나

failurelimit를 10으로 설정하면 플러그인이 로드되는 동작을 제어할 수 있습니다. 눈에 보이는 영역에 없는 이미지가 10개 발견되면 검색을 중단합니다. 레이아웃이 복잡하다면 이 매개변수를 더 높게 설정하세요.

숨겨진 사진 불러오기

$("img.lazy").lazyload({
 failure_limit : 10
});

숨겨진 사진이 많을 수 있습니다. 예를 들어, 플러그인은 목록을 필터링하는 데 사용되며, 성능을 향상시키기 위해 지연 로드는 기본적으로 숨겨진 이미지를 무시합니다. 숨겨진 이미지를 로드하려면 Skip_invisible을 false로 설정하세요.

플러그인 다운로드

최신 버전의 소스 코드와 압축 코드는 이미 OSX의 Safari 5.1, Safari 6, Chrome 20, Firefox 12 브라우저, Windows의 Chrome 20, IE 8 및 IE 9 브라우저, iOS5(iPhone)에서 사용할 수 있습니다. 및 iPad의 Safari 5.1 브라우저에서 테스트됨)

jQuery 지연 로드 및 지연 로딩 관련 기사에 대한 자세한 설명은 PHP 중국어 웹사이트를 참고하세요!