jquery 플러그 인 을 사용 하여 그림 지연 로드 기술 에 대한 상세 한 설명

jquery 그림 지연 로드 플러그 인 jquery.lazyload 를 사용 하여 그림 지연 로드 를 실현 하고 사이트 오픈 속 도 를 향상 시 키 는 다운로드 주 소 를 추천 합 니 다.http://www.appelsiini.net/download/jquery.lazyload.js1.빠 른 사용 편 1.JS 플러그 인 가 져 오기

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

2.페이지 에 다음 과 같은 javascript:

 
<script type="text/javascript"> 
$("img").lazyload(); 
</script> 

을 추가 하면 모든 그림 이 로드 지연 됩 니 다.2.고급 편 상세 설명(그렇게 많은 것 을 알 고 싶 지 않 으 면 돌아 갈 수 있 습 니 다)Lazy Load 는 JavaScript 로 작 성 된 jQuery 플러그 인 입 니 다.긴 페이지 의 그림 을 불 러 오 는 것 을 지연 시 킬 수 있 습 니 다.브 라 우 저 시각 영역 밖의 그림 은 불 러 오지 않 습 니 다.사용자 가 페이지 를 위치 로 스크롤 할 때 까지 입 니 다.이것 은 그림 을 미리 불 러 오 는 처리 방식 과 정반 대 입 니 다.많은 큰 그림 을 포함 하 는 긴 페이지 에서 그림 을 불 러 오 는 것 을 지연 시 키 면 페이지 로 딩 속 도 를 빠르게 할 수 있 습 니 다.브 라 우 저 는 보 이 는 그림 을 불 러 온 후에 바로 준비 상태 로 들 어 갑 니 다.어떤 경우 에는 서버 부담 을 줄 이 는 데 도 도움 이 됩 니 다.Lazy Load 영감 은 Matt Mlin 에서 나 왔 습 니 다.ac 에서 만 든 YUI ImageLoader 도구 상자.어떻게 사용 하나 요?Lazy Load 는 jQuery 에 의존 합 니 다.다음 코드 를 페이지 헤드 영역 에 추가 하 십시오.

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

실행 코드 에 다음 문 구 를 추가 하 십시오.

 
$("#xd").lazyload(); 

이것 은 id="xd"영역 아래 의 그림 을 지연 시 킵 니 다.민감 도 플러그 인 을 설정 하여 threshold 옵션 을 제공 합 니 다.임계값(그림 으로 불 러 오 는 거 리 를 터치)을 설정 하여 그림 의 불 러 오 기 를 제어 할 수 있 습 니 다.기본 값 은 0(그림 경계 에 도 착 했 을 때 불 러 옵 니 다)입 니 다.view sourceprint?$("\#xd").lazyload({ threshold : 200 }); 임계값 을 200 으로 정 하고 시각 영역 이 그림 과 200 개의 픽 셀 이 있 을 때 그림 을 불 러 옵 니 다.원문:Setting threshold to 200 causeimage to load 200 pixels before it is visible.)자리 잡 은 그림 을 설정 하고 이 벤트 를 정의 하여 로 딩 동작 을 수행 할 수 있 습 니 다.이 때 자리 잡 은 그림 에 URL 주 소 를 설정 해 야 합 니 다.투명,회색,흰색 1×1 픽 셀 의 그림 은 플러그 인 에 포함 되 어 있 습 니 다.

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

이벤트 트리거 로 딩 이 벤트 는 jQuery 시간 일 수 있 습 니 다.예 를 들 어 click 과 mouseover.sporty 와 foobar 와 같은 사용자 정의 이 벤트 를 사용 할 수 있 습 니 다.기본적으로 사용자 가 창 에 있 는 그림 이 있 는 위치 로 굴 러 갈 때 까지 기다 리 는 상태 입 니 다.회색 으로 자리 잡 은 그림 이 클릭 되 기 전에 그림 불 러 오 는 것 을 막 을 수 있 습 니 다.이렇게 할 수 있 습 니 다.

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

그림 을 완전히 불 러 올 때 플러그 인 은 기본적으로 show()방법 으로 그림 을 표시 합 니 다.사실 원 하 는 효 과 를 사용 하여 처리 할 수 있 습 니 다.아래 코드 는 FadeIn 효 과 를 사용 합 니 다.이것 은 프 리 젠 테 이 션 페이지 입 니 다.

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

그림 은 용기 에 플러그 인 을 스크롤 가능 한 그림 에 사용 할 수 있 습 니 다.예 를 들 어 스크롤 바 가 있 는 DIV 요소 입 니 다.용 기 를 jQuery 대상 으로 정의 하고 초기 화 방법 으로 매개 변수 로 전달 하 는 것 입 니 다.이것 은 수평 스크롤 프 리 젠 테 이 션 페이지 와 수직 스크롤 프 리 젠 테 이 션 페이지 입 니 다.CSS 코드:\#container{height:600 px;overflow: scroll; } JavaScript 코드:

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

그림 이 스크롤 페이지 를 순서대로 배열 하지 않 을 때 Lazy Load 는 불 러 오 는 그림 으로 순환 합 니 다.그림 이 보 이 는 영역 에 있 는 지 확인 합 니 다.기본 값 으로 보 이 는 영역 에 없 는 첫 번 째 그림 을 찾 을 때 순환 을 멈 춥 니 다.그림 은 스 트림 으로 분포 되 어 있 는 것 으로 여 겨 집 니 다.그림 은 페이지 의 순서 와 HTML 코드 의 순서 가 같 습 니 다.그러나 일부 레이아웃 에 서 는 이러한 가설 이 성립 되 지 않 습 니 다.그러나 failuremit 옵션 을 통 해 불 러 오 는 행 위 를 제어 할 수 있 습 니 다.

 
$("img").lazyload({ 
failurelimit : 10 
}); 

failuremit 을 10 개의 플러그 인 으로 설정 하고 보이 지 않 는 영역 에 있 는 그림 10 개 를 찾 아야 검색 을 중단 합 니 다.만약 찌 질 한 레이아웃 이 있다 면,이 매개 변 수 를 좀 높 게 설정 하 십시오.그림 레이 지 로드 플러그 인 을 불 러 오 는 것 을 지연 시 키 는 불완전한 기능 입 니 다.그러나 이것 은 그림 의 지연 로드 를 실현 하 는 데 도 사 용 됩 니 다.아래 코드 는 페이지 로드 가 완 료 된 후에 불 러 옵 니 다.페이지 로드 가 완 료 된 지 5 초 후에 지정 한 영역 내의 그림 은 자동 으로 불 러 옵 니 다.이것 은 지연 로드 프 리 젠 테 이 션 페이지 입 니 다.

 
$(function() { 
$("img:below-the-fold").lazyload({ 
placeholder : "img/grey.gif", 
event : "sporty" 
}); 
}); 
$(window).bind("load", function() { 
var timeout = setTimeout(function() {$("img").trigger("sporty")}, 5000); 
});