Images_jquery의 지연 로딩을 위한 지연 로드 jQuery 플러그인

사용 방법
Lazy Load는 jQuery를 사용합니다. 페이지 헤드 영역에 다음 코드를 추가하세요.

코드 복사 코드는 다음과 같습니다.

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

그리고 실행 코드에 다음 문을 추가합니다.

코드 복사 코드는 다음과 같습니다.

 

$("http://www.appelsiini.net/projects/ lazyload/img").lazyload() ;

이렇게 하면 id="http://www.appelsiini.net/projects/lazyload/img" 영역 아래의 이미지가 지연 로드됩니다.
감도 설정
플러그인은 임계값(트리거 로딩 지점에서 이미지까지의 거리)을 설정하여 이미지 로딩을 제어할 수 있는 임계값 옵션을 제공합니다. 기본값은 0입니다.

코드 복사 코드는 다음과 같습니다.

 

$( "http://www.appelsiini.net/projects/lazyload/img").lazyload( { 임계값 : 200 })

임계값을 200으로 설정하고, 보이는 영역은 이미지에서 200픽셀 떨어져 있습니다. (이 문장의 문자 그대로의 의미는 내 것과 동일합니다. 일관되지 않은 이해, 원본 텍스트: 임계값을 200으로 설정하면 이미지가 표시되기 전에 200픽셀이 로드됩니다.)
자리 표시자 이미지
자리 표시자 이미지를 설정하고 이벤트를 정의하여 로드 작업을 실행할 수도 있습니다. 투명, 회색 및 흰색 1x1 픽셀 이미지가 플러그인에 이미 포함되어 있습니다. >

코드 복사 코드는 다음과 같습니다.

$("img").lazyload({ 자리 표시자 : "img/grey.gif" });

이벤트 트리거 로딩
이벤트는 클릭 및 마우스 오버와 같은 모든 jQuery 이벤트일 수 있습니다. sporty 및 foobar와 같은 사용자 정의 이벤트를 사용합니다. 기본적으로 사용자가 창으로 스크롤할 때까지 대기 상태입니다. 클릭하기 전에 회색 자리 표시자 이미지가 로드되지 않도록 하려면 다음을 수행하세요. >

코드 복사 코드는 다음과 같습니다. $("img").lazyload({

자리 표시자: "img/grey.gif",

이벤트: "클릭"
})



특수 효과 사용

이미지가 완전히 로드되면 플러그인은 기본적으로 show() 메서드를 사용하여 이미지를 표시합니다. 실제로 처리하려는 특수 효과를 사용할 수 있습니다. 아래 코드는 데모 페이지입니다.

코드 복사 코드는 다음과 같습니다. $ ("img").lazyload ({

자리 표시자: "img/grey.gif",

효과: "fadeIn"
})



컨테이너 내부 사진

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

코드 복사 코드는 다음과 같습니다. #container {

높이: 600px;

오버플로: 스크롤
}


JavaScript 코드:

코드 복사 코드는 다음과 같습니다. $("img").lazyload({

자리 표시자: "img /grey.gif",

컨테이너: $("#container")
});


이미지가 순서대로 정렬되지 않은 경우
페이지를 스크롤할 때 Lazy Load는 로드된 이미지를 반복하면서 이미지가 보이는 영역 내에 있는지 확인합니다. 기본적으로 첫 번째 이미지가 검색됩니다. 가시 영역에 없는 이미지가 있으면 루프가 중지됩니다. 이미지는 유동적으로 배포되는 것으로 간주되며 페이지 내 이미지의 순서는 동일합니다. 그러나 일부 레이아웃에서는 이러한 가정이 적용되지 않습니다. 그러나

코드 복사를 제어하기 위해 failurelimit 옵션을 전달할 수 있습니다. 코드는 다음과 같습니다:

 
$("img") .lazyload({
failurelimit : 10
}); 🎜>눈에 보이는 영역에 없는 10개의 이미지를 찾은 후에만 플러그인이 검색을 중지하도록 failurelimit를 10으로 설정하세요. 레이아웃이 좋지 않은 경우
이미지의 지연 로딩 Lazy Load 플러그인의 불완전한 기능이지만 이미지의 지연 로딩을 구현하는 데에도 사용할 수 있습니다. 다음 코드는 페이지가 로드된 후 5초 후에 페이지 로딩 완료를 구현합니다. 자동으로 로드됩니다.

코드 복사

코드는 다음과 같습니다. 🎜>$(function() { $("img:below-the-fold").lazyload({ 자리 표시자: "img/grey .gif",

이벤트 : "스포티"

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


플러그인 다운로드
최신 버전:

소스 코드

,
압축 코드, 패킹 코드알려진 문제 웹킷 버그 #6656으로 인해 Lazy Load가 Safari 및 Chrome. 로드하고 싶지 않은 모든 이미지를 즉시 로드합니다. jQuery 1.3.x에서는 IE에서 플러그인이 무효화되는 것 같습니다. 작성자는 이 문제를 해결하기 위해 노력하고 있으며 그동안은 jQuery 1.2.6에서만 플러그인을 사용할 수 있습니다. 또한 Mint를 사용하는 경우 mint 태그를 헤더에 추가하세요. 페이지 끝에 mint 태그를 추가하면 Lazy Load 플러그인이 방해를 받게 됩니다. 이는 매우 드문 문제입니다. 해결책을 찾으면 작성자에게 문의하세요.