jquery Plug-in_jquery를 이용한 이미지 지연 로딩 기술에 대한 자세한 설명

이미지 지연 로딩을 구현하고 웹사이트 열기 속도를 향상하려면 jquery 이미지 지연 로딩 플러그인 jquery.lazyload를 사용하는 것이 좋습니다. 다운로드 주소: http://www.appelsiini .net/download/jquery.lazyload.js

1. 빠른 사용 장
1. JS 플러그인 가져오기

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

2. 귀하의 페이지:

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

이렇게 하면 모든 이미지가 느리게 로드됩니다.
2. 고급 장에 대한 자세한 소개(직접 우회할 수 있는 내용이 너무 많아서 알고 싶지 않습니다.)
Lazy Load는 JavaScript로 작성된 jQuery 플러그인으로, 이미지 로딩을 지연시킬 수 있습니다. 긴 페이지에서는 사용자가 페이지를 해당 위치로 스크롤할 때까지 이미지가 로드되지 않습니다.
큰 이미지가 많은 긴 페이지에서 이미지를 지연 로드하는 방식입니다. 페이지 로딩 속도를 높일 수 있습니다. 그 후에는 준비 상태로 들어가기 전에 서버 로드를 줄이는 데도 도움이 됩니다.
Lazy Load는 Matt Mlinac이 제작한 YUI ImageLoader 도구 상자에서 영감을 받았습니다. .
사용 방법은?
지연 로드는 jQuery에 따라 다릅니다. 페이지 헤드 영역에 다음 코드를 추가하세요.

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

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

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

$("#xd").lazyload()

이렇게 하면 id="xd" 영역 아래의 이미지가 지연 로드됩니다.
민감하게 설정
플러그인은 임계값 옵션을 제공합니다. 임계값(이미지까지 로드가 트리거되는 거리) 기본값은 0입니다(이미지 경계에 도달하면 로드됨).
view sourceprint?$ ("#xd").lazyload({ 임계값: 200 });
임계값을 200으로 설정하고 가시 영역이 이미지에서 200픽셀 떨어져 있을 때 이미지 로드를 시작합니다. (이 문장의 의미는 제가 이해한 것과 일치하지 않습니다. 원문: 임계값 설정 200으로 설정하면 이미지가 표시되기 전에 200픽셀이 로드됩니다.)
자리 표시자 이미지
자리 표시자 이미지를 설정하고 이벤트를 정의하여 로드 작업을 실행할 수도 있습니다. 이때 URL 주소를 설정해야 합니다. 자리 표시자 이미지. 투명한 회색 및 흰색 1×1 픽셀 이미지가 이미 플러그인에 포함되어 있습니다.

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

$("img").lazyload({ placeholder : "img/grey.gif" })

이벤트 트리거 로드
이벤트는 무엇이든 가능합니다. click 및 mouseover와 같은 jQuery 이벤트 sporty 및 foobar와 같은 사용자 정의 이벤트를 사용할 수도 있습니다. 기본적으로 사용자가 창에서 그림 위치로 스크롤할 때까지 대기 상태입니다. 자리 표시자 클릭하기 전에 이미지가 로드되는 것을 방지하려면 다음을 수행하십시오.

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

$("img").lazyload({
자리 표시자: "img/grey.gif",
이벤트: "클릭"
})

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

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

$("img").lazyload({
자리 표시자: "img/grey.gif",
효과: "fadeIn"
})


이미지가 컨테이너 내부에 있습니다
스크롤 막대가 있는 DIV 요소와 같이 스크롤 가능한 컨테이너의 이미지에 플러그인을 사용할 수 있습니다. 컨테이너를 jQuery 개체로 정의하고 다음과 같이 전달하기만 하면 됩니다. 초기화 방법에 대한 매개변수입니다. 이것은 가로 스크롤 데모 페이지와 세로 스크롤 데모 페이지입니다.
CSS 코드:
#container { height: 600px;overflow: scroll; 🎜>

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

$("img").lazyload({

placeholder : "img/grey.gif ",
container: $("#container")
})


이미지가 순서대로 정렬되지 않은 경우

페이지가 스크롤되면 Lazy Load는 로드된 이미지를 순환합니다. 이미지가 루프의 표시 영역 내에 있는지 확인합니다. 기본적으로 표시 영역에 없는 첫 번째 이미지가 발견되면 루프가 중지됩니다. 유동적인 방식으로 배포되는 것으로 간주되며 페이지의 이미지 순서와 HTML 코드의 순서는 동일합니다. 그러나 일부 레이아웃에서는 이 가정이 사실이 아닙니다. 그러나 로드 동작을 통해 제어할 수 있습니다. failurelimit 옵션

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

$("img") .lazyload({

failurelimit : 10
});


failurelimit를 10으로 설정합니다. If 플러그인은 검색을 중지하기 전에 표시 영역에 없는 10개의 이미지를 찾습니다. 레이아웃이 복잡하다면 이 매개변수를 더 높게 설정하세요.

이미지 지연 로딩
지연 로딩 플러그인의 불완전한 기능이지만 다음 코드는 지연 로딩을 구현하는 데에도 사용할 수 있습니다. 페이지가 로드된 후 5초가 지나면 지정된 영역의 이미지가 자동으로 로드됩니다.

복사 code 코드는 다음과 같습니다:

$(function() {

$("img: below-the-fold").lazyload({
자리 표시자: "img/grey.gif",
이벤트: "스포티"
})
})
$(window ).bind("load", function() {
var timeout = setTimeout(function() {$("img").trigger("sporty")}, 5000)
});