jquery.lazyload는 이미지의 지연 로딩을 구현합니다.

ImageLazyLoad 기술이란
페이지에 이미지가 많은 경우 페이지를 열면 필연적으로 서버와 많은 양의 데이터 상호 작용이 발생합니다. 특히 고화질 사진의 경우 수 M의 공간을 차지합니다. ImageLazyLoad 기술은 현재 보이는 인터페이스의 그림은 불러오지만, 보이지 않는 페이지(스크롤바를 당겨서 보이는 페이지)의 그림은 불러오지 않기 때문에 필연적으로 속도의 질적 향상으로 이어진다.

ImageLazyLoad 구현 방법

1. JQuery 플러그인 사용, 플러그인 이름: jquery.lazyload(7kb 크기), 압축(3kb 크기)


온라인 압축 js http://closure-compiler.appspot.com/home
매우 멋진 특수 효과이지만 JQuery 플러그인을 사용하려면 몇 줄의 코드만 필요합니다. 사용 과정은 다음과 같습니다.

1. JS 플러그인 가져오기
;script src="jquery.lazyload.js" type ="text/javascript">
2. 페이지에 다음 자바스크립트를 추가합니다:

$("img") .lazyload();

이렇게 하면 모든 이미지가 느리게 로드됩니다.


물론 플러그인에도 설정할 수 있는 여러 구성 항목이 있습니다.

1. 임계값 변경

$(“img”).lazyload({ 임계값 : 200 })

임계값을 200으로 설정합니다. 도달하기 전에 먼저 200픽셀을 로드하세요.


2. 물론 자리표시자 이미지와 맞춤 이벤트를 설정하여 이미지 로딩 이벤트를 실행할 수도 있습니다.

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

$("img").lazyload({
placeholder : "img/grey.gif",
event : "click "
});

3. 효과 매개변수를 정의하여 일부 이미지 표시 효과를 정의할 수 있습니다.

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

$("img").lazyload({
placeholder : "img/grey.gif",
효과 : "fadeIn"
});

LazyLoad(지연 로딩) 기술은 웹 페이지의 이미지 로딩을 지연시킬 뿐만 아니라 Google 리더 및 Bing에도 사용됩니다. 이미지 검색은 🎜>LazyLoad 기술을 최대한 활용합니다.
1. Ajax 기술과의 충돌
2. 이미지가 너무 많이 로드되면 로딩이 중지됩니다. 3. 불규칙한 코드를 작성하는 학생은 주의해야 합니다. 이유가 무엇이든 페이지의 img 태그 높이 속성이 정의되지 않은 경우 ImageLazyLoad를 사용하지 않는 것이 좋습니다.

누구나 직접 채택할 수 있습니다. Taobao의 지연 로딩 기술: (2kb 크기)
http://a.tbcdn.cn/kissy/1.0.0/build/imglazyload/imglazyload-min.js
호출 방법도 매우 간단합니다.

참고: 이 스크립트는 yahoo-dom에 따라 다릅니다. 이벤트, yui 2.x를 페이지에 로드해야 하는 경우 다음 주소를 직접 인용할 수도 있습니다:


구성 매개변수는 다음과 같습니다.




코드 복사

코드는 다음과 같습니다.


수동 모드에서는 src 속성 이름을 수동으로 변경해야 합니다. 페이지에서 지연되어야 하는 이미지 data-lazyload-src로 변경합니다. 예를 들어 SRP 페이지에서는 아기 목록의 마지막 20개 사진이 느리게 로드됩니다. 출력 시 HTML 코드는 다음과 같습니다.



Jquery, Prototype 등과 같은 JS 프레임워크의 팬이라면 모두 맞춤형 LazyLoad 플러그인을 제공합니다.

볼 수 있음http://www.appelsiini.net/projects/lazyload

LazyLoad(지연 로딩) 기술은 웹 페이지의 이미지 로딩을 지연시키는 데 사용될 뿐만 아니라 Google 리더 및 Bing 이미지 검색에도

LazyLoad 기술

을 활용합니다.