Images_jquery 지연 로딩에 대한 지연 로드 jQuery 플러그인 중국어 사용 문서-JS 튜토리얼-php.cn

Images_jquery 지연 로딩에 대한 지연 로드 jQuery 플러그인 중국어 사용 문서

WBOY

풀어 주다： 2016-05-16 17:48:59

원래의

1019명이 탐색했습니다.

LazyLoad 기술이란 무엇인가요?

페이지에 사진이 많은 경우 페이지를 열면 필연적으로 서버와 많은 양의 데이터 상호 작용이 발생합니다. 특히 고화질 사진의 경우 수백K의 공간을 차지합니다. Lazy Load는 JavaScript로 작성된 jQuery 플러그인으로, 긴 페이지에서 이미지 로드를 지연시킬 수 있습니다. 브라우저의 표시 영역 외부에 있는 이미지는 사용자가 페이지를 해당 위치로 스크롤할 때까지 로드되지 않습니다. 정확히 반대로 처리했습니다.
큰 이미지가 많이 포함된 긴 페이지에서 이미지를 느리게 로드하면 페이지 로드 속도가 빨라질 수 있습니다. 경우에 따라 브라우저는 표시되는 이미지를 로드한 후 준비 상태로 전환되어 서버 로드를 줄이는 데 도움이 될 수도 있습니다. 속도 향상.
호환 대상: ie6/7/8, firefox 3.5.5, Opera 10.10, safari 4.0.4, chrome 3.0. safari 및 chrome의 일부 기능은 지원되지 않습니다.

Lazy Load는 Matt Mlinac이 만든 YUI ImageLoader 도구 상자에서 영감을 받았습니다.

원문 링크는 다음과 같습니다. http://www.appelsiini.net/projects/lazyload

현재 Lazy Load 버전은 1.8입니다. .1

다운로드 주소: http://www.jb51.net/jiaoben/63757.html

인스턴스 다운로드:

다운로드 명세서:
1. 주의사항: 본 코드는 학습 및 소통용이므로 상업적 목적으로 사용하지 마세요.
2. 참고: 이 코드는 학습 및 의사소통 전용이므로 상업적 목적으로 사용하지 마십시오.
파일 정보: 파일명: Lazy Load 지연 로딩 이미지 예시
파일 해시: dd3e435124e377c2da33344d442f85d1
파일 크기: 1.1MB
파일 업로드 날짜: 2012년 3월 25일
파일 업데이트 날짜: 3월 25일 , 2012
파일 설명: 페이지에 사진이 많은 경우 페이지를 열면 필연적으로 서버와 많은 양의 데이터 상호 작용이 발생합니다. 특히 고화질 사진의 경우 수백K의 공간을 차지합니다. Lazy Load는 JavaScript로 작성된 jQuery 플러그인으로, 긴 페이지에서 이미지 로드를 지연시킬 수 있습니다. 브라우저의 표시 영역 외부에 있는 이미지는 사용자가 페이지를 해당 위치로 스크롤할 때까지 로드되지 않습니다. 정확히 반대로 처리했습니다.

사용 방법 본론으로 들어가겠습니다.

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

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

지연 로드 사용법 방법은 매우 간단하지만 새 버전에서는 일부 조정이 이루어졌으며 태그의 속성을 수정해야 합니다. 태그의 src 속성을 대기 이미지의 URL로 변경하고, data-original 속성에 실제 이미지 URL을 입력합니다.
는 다음과 같습니다.

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

 
제안: src의 대기 이미지는 1픽셀 흑백 이미지를 사용하는 것이 가장 좋습니다. . 

JS 코드는 다음과 같습니다.

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

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

이렇게 하면 Demo의 효과를 얻을 수 있습니다.

Demo를 보신 후, 효과가 없다고 느끼시나요? 이 문제는 나중에 언급됩니다.

실제로 이미지 URL을 저장하기 위해 지정된 data-original 속성을 사용할 필요는 없습니다. 다른 속성 이름은 다음과 같이 직접 지정하세요.

JS 코드는 다음과 같습니다.

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

$("img.lazy").lazyload({ data_attribute : "attr" })

data_attribute 속성을 해당 이름으로 설정하면 됩니다. (참고: HTML 코드는 대소문자를 구분하지 않습니다. 따라서 "data-" 뒤에는 소문자 또는 숫자만 올 수 있습니다.) 

브라우저의 경우 JavaScript를 지원하지 않는 경우 해당 다운그레이드 처리가 있어야 합니다. 

은 스크립트가 실행되지 않을 때 대체 콘텐츠/텍스트를 정의하는 데 사용되는  태그를 사용할 수 있습니다. 장점은 검색 엔진 크롤러가 JavaScript 스크립트를 처리하지 않으므로 <br><br><div class="codetitle">
<span><a style="CURSOR: pointer" data="3317" class="copybut" id="copybut3317" onclick="doCopy('code3317')"><u>코드 복사</u></a></span> 코드는 다음과 같습니다.</div>
<div class="codebody" id="code3317"> <br><img class="lazy" src="img/grey.gif" data-original="img/example.jpg" width=" 640" high="480"> <br><noscript><img src="img/example.jpg" width="640" high="480"> >
 

CSS 스타일 설정:

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

.lazy { 
디스플레이: 없음 
} 

 

JS 코드:

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

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

이미지 로딩 응답 거리 설정
Lazy Load 플러그인의 기본 설정은 이미지가 브라우저 창에 나타날 때 로딩이 시작되지만 임계값을 설정하면 됩니다.

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

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

또한 임계값은 양수 또는 음수가 될 수 있습니다. 값이 200이라고 가정하면 이미지가 화면에 나타나는 것에서 200px 떨어져 있으면 로드가 시작됩니다. 값이 -200이면 그 반대가 됩니다. 이미지가 창에 나타났으며 로딩이 시작되기 전 브라우저 창 하단과의 거리는 200px입니다.
PS: 이미지와 화면 사이의 거리는 이미지의 상단 위치를 기준으로 계산됩니다. 참고: 임계값 설정은 웹 사이트의 길이와 이미지 높이를 고려해야 합니다. 값이 너무 크면 로드할 수 없는 문제가 발생할 수 있으므로 값 설정을 절반을 초과하지 않는 것이 좋습니다.

이벤트를 통한 로딩
jQuery에서 정의한 이벤트를 통해 로딩을 실행할 수도 있고,

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

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

event : "click" 
}) 
 
 
애니메이션 효과 구현

위 데모에서 이미지 로딩 효과가 없는 이유는 Lazy Load의 기본 이미지 로딩이 다음을 통해 표시되기 때문입니다. jQuery의 show() 메소드를 사용하면 이미지가 거의 즉시 나타납니다. 물론 다른 효과도 얻을 수 있습니다.

코드 복사

코드는 다음과 같습니다. $("img.lazy").lazyload({ 효과 : "fadeIn" })

 
slideDown() 메서드를 사용할 수도 있지만 효과가 좋지 않습니다. 

애니메이션 속도를 제어하려면 effectspeed 속성을 수정해도 됩니다.

코드 복사

코드는 다음과 같습니다. $("img.lazy").lazyload({ effect : "fadeIn", effectspeed : 1000

})

 
 effectspeed 속성은 기본적으로 비어 있으므로 설정하지 않으면 애니메이션 시간이 
컨테이너 컨테이너 속성
로드할 이미지가 모두 컨테이너에 배치된 경우 컨테이너 속성을 img가 배치된 컨테이너의 객체로 지정하세요. 
 🎜>

코드 복사

코드는 다음과 같습니다. #container { height : 600px; 오버플로: 스크롤; }

 
js 코드: 

코드 복사

코드는 다음과 같습니다.

$("img.lazy").lazyload({ container: $("# 컨테이너") });

더 이상 고민하지 말고 수직 데모뿐만 아니라 수평 데모도 살펴보겠습니다.

failure_limit 속성
Lazy Load에는 HTML에 따라 루프를 수행하는 메커니즘이 있습니다. 문서의 레이아웃은 위에서 아래로 검색됩니다. 표시/로드되지 않은 첫 번째 img가 발견되면 검색이 중지됩니다. (실제로는 개체(그룹) $("img. lazy") )

이 failure_limit 속성의 용도는 무엇입니까?

요즘에는 웹사이트를 디자인할 때 float 및 position과 같은 수많은 위치 지정 스타일이 사용됩니다. 브라우저에 나타나는 레이아웃 효과는 HTML 문서의 DOM 순서와 많이 다릅니다.
화면에는 태그가 표시되지만 표시되지 않는 경우가 있습니다. 실제로 HTML 문서에서 위치는 아직 표시되지 않은 태그 뒤에 위치합니다. 이로 인해 Lazy Load가 해당 이미지를 로드할 수 없게 됩니다. 첫 번째 표시되지 않은
이때 failure_limit 속성을 사용할 수 있습니다.
코드 복사

코드는 다음과 같습니다. $("img.lazy").lazyload({ failure_limit : 10

});

이런 방식으로 Lazy Load는 표시되지 않은 10번째 태그를 찾아냅니다. 페이지에 사진이 많고 레이아웃이 복잡한 경우에는 failure_limit가 매우 유용합니다. 원본 텍스트에도 따뜻한 알림이 있습니다. 펑키한 레이아웃이 있는 경우 이 숫자를 높게 설정하세요. 웹사이트 레이아웃이 매우 "비정상적"이라면 값을 더 높게 조정하는 것이 좋습니다.

지연된 다운로드 이미지

사용자 정의 이벤트를 사용한 다음 setTimeout을 통해 이벤트를 트리거하도록 지연을 설정할 수 있습니다.

코드 복사

코드는 다음과 같습니다. 다음과 같습니다: $( function() { $("img:below-the-fold").lazyload({ event : "sporty"

}) ;

}); 

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

 
주요 원칙은 이벤트가 스크롤이 아닌 이벤트로 설정되면 실제로 빌드된 이벤트에 바인딩된다는 것입니다. -in "appear" 이벤트. 이름에서 알 수 있듯이 이 이벤트는 이미지를 표시하는 데 사용됩니다. (실제로 스크롤도 이 이벤트를 호출합니다.) 

skip_invisible은 보이지 않는 이미지를 로드합니다 
 Lazy Load 플러그인 기본적으로 숨겨진 이미지를 로드하지 않습니다(예: display:none). 이렇게 하면 숨겨진 이미지를 함께 로드하려는 경우 Skip_invisible을 false로 설정할 수 있습니다. 

코드 복사

코드는 다음과 같습니다.

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