jQuery 지연 로딩 이미지 플러그인 지연 로딩 사용 가이드_jquery

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

큰 이미지가 많이 포함된 긴 페이지에서 이미지를 지연 로딩하면 페이지 로딩 속도가 빨라질 수 있습니다. 경우에 따라 표시되는 이미지를 로딩한 후 브라우저가 준비 상태로 전환됩니다.

사용방법

지연 로드는 jQuery에 따라 다릅니다. 페이지의 헤드 영역에 다음 코드를 추가하세요.

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

HTML 코드를 수정해야 합니다. src 속성에 부스 심볼 이미지를 설정해야 합니다. 데모 페이지에서는 1×1 픽셀 회색 GIF 이미지를 사용하며, data-original 속성에 실제 이미지의 URL을 설정해야 합니다. . 여기에서 지연 로드해야 하는 이미지 객체를 가져오기 위한 특정 클래스를 정의할 수 있습니다. 이 방법으로 플러그인 바인딩을 간단히 제어할 수 있습니다.

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

이미지 처리 코드는 다음과 같습니다.

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

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

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

민감도 설정

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

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

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

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

.게으른 {
표시: 없음;
}

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

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

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

선택 사항이지만 플러그인을 원활하게 다운그레이드하려면 이 작업을 수행해야 합니다.

기본적으로 이미지가 화면에 나타날 때 로드됩니다. 이미지를 미리 로드하고 싶다면 임계값 옵션을 200으로 설정하면 이미지가 200일 때 미리 로드됩니다.

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

$("img.lazy").lazyload({ 임계값 : 200 });

자리 표시자 이미지

자리 표시자 이미지를 설정하고 이벤트를 정의하여 로드 작업을 실행할 수도 있습니다. 이때 자리 표시자 이미지에 대한 URL 주소를 설정해야 합니다. 투명, 회색 및 흰색 1×1 픽셀 이미지가 이미 포함되어 있습니다. 플러그인 내부.

이벤트 트리거 로드

이벤트는 click 및 mouseover와 같은 jQuery 이벤트일 수 있습니다. 또한 sporty 및 foobar와 같은 사용자 정의 이벤트를 사용할 수도 있습니다. 기본적으로 사용자가 해당 위치로 스크롤할 때까지 대기 상태입니다. 회색으로 표시된 그림을 클릭할 때까지 자리표시자 이미지가 로드되지 않도록 하려면 다음을 수행하세요.

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

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

특수효과 사용

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

효과 시연 페이지입니다.

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

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

사진은 용기 내부입니다

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

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

#컨테이너 {
높이: 600px;
오버플로: 스크롤;
}
$("img.lazy").lazyload({    
컨테이너: $("#컨테이너")
});

사진 순서가 안맞을 때

페이지를 스크롤할 때 Lazy Load는 로드된 이미지를 반복합니다. 루프에서는 이미지가 표시 영역 내에 있는지 여부를 감지하며 기본적으로 표시되지 않는 첫 번째 이미지가 나타나면 루프가 중지됩니다. 이미지는 유동적으로 분산된 것으로 간주되며 페이지의 이미지 순서는 HTML 코드의 순서와 동일합니다. 그러나 일부 레이아웃에서는 이러한 가정이 적용되지 않습니다. 그러나 다음을 통해 로드 동작을 제어할 수 있습니다. 실패 제한 옵션

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

$("img.lazy").lazyload({
실패_한계 : 10
});

눈에 보이는 영역에 없는 이미지 10개를 찾은 후 플러그인이 검색을 중지하도록 failurelimit를 10으로 설정하세요. 레이아웃이 번거롭다면 이 매개변수를 더 높게 설정하세요.

이미지 로딩 지연

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

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

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

숨겨진 이미지 불러오기

페이지에 숨겨진 사진이 많이 묻혀 있을 수 있습니다. 예를 들어 플러그인을 사용하여 목록을 필터링하는 경우 성능을 향상하기 위해 목록에 있는 각 항목의 표시 상태를 지속적으로 수정할 수 있습니다. 로드는 기본적으로 숨겨진 사진을 무시합니다. 숨겨진 이미지를 로드하려면 Skip_invisible을 false로 설정하세요

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

$("img.lazy").lazyload({
Skip_invisible : 거짓
});

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.

잠시 시간을 내어 기사를 친구들과 공유하거나 댓글을 남겨주세요. 여러분의 지원에 진심으로 감사드립니다!