jquery lazyload 지연 로드 기술 의 실현 원리 분석

머리말
게 으 른 로드 기술(lazyload 로 약칭)은 신기 술 이 아니 라 js 프로그래머 가 웹 페이지 의 성능 을 최적화 하 는 방안 이다.lazyload 의 핵심 은 필요 에 따라 불 러 오 는 것 입 니 다.대형 사이트 에는 구 글 의 사진 검색 페이지,신 뢰 홈 페이지,타 오 바 오,QQ 공간 등 lazyload 의 모습 이 담 겨 있다.따라서 lazyload 기술 을 습득 하 는 것 은 좋 은 선택 입 니 다.안 타 깝 게 도 jquery 플러그 인 lazy load 홈 페이지http://www.appelsiini.net/projects/lazyload는 새 브 라 우 저 를 지원 하지 않 는 다 고 합 니 다.
lazyload 는 어떤 장소 에서 응용 하 는 것 이 비교적 적합 합 니까?
그림,falsh 자원,iframe,웹 편집기(FCK 와 유사)등 이 큰 대역 폭 을 차지 하고 있 으 며,이 모듈 들 은 브 라 우 저 시각 영역 에 있 지 않 기 때문에 lazyload 를 사용 하여 적당 한 시기 에 이 자원 을 불 러 올 수 있 습 니 다.웹 페이지 가 열 릴 때 너무 많은 자원 을 불 러 오지 않도록 사용자 가 너무 오래 기다 리 게 합 니 다.
어떻게 lazyload 를 실현 합 니까?
lazyload 의 어 려 운 점 은 사용자 가 필요 로 하 는 자원 을 적당 한 시기 에 불 러 오 는 방법 입 니 다.따라서 우 리 는 몇 가지 정 보 를 알 아서 목표 가 고객 구역 에 나타 난 지 확인 해 야 한다.그 중에서 다음 과 같다.

시각 영역 이 브 라 우 저 상단 위치 에 비해;

불 러 올 자원 이 브 라 우 저 상단 위치 에 비해

상기 두 가지 데 이 터 를 얻 은 후에 다음 과 같은 함 수 를 통 해 특정한 대상 이브 라 우 저 시각 영역에 있 는 지 알 수 있다.브 라 우 저의 시각 영역 위치

 
//              
function getClient(){ 
var l, t, w, h; 
l = document.documentElement.scrollLeft || document.body.scrollLeft; 
t = document.documentElement.scrollTop || document.body.scrollTop; 
w = document.documentElement.clientWidth; 
h = document.documentElement.clientHeight; 
return { left: l, top: t, width: w, height: h }; 
} 

를 되 돌려 불 러 올 자원 위치

 
//           
function getSubClient(p){ 
var l = 0, t = 0, w, h; 
w = p.offsetWidth; 
h = p.offsetHeight; 
while(p.offsetParent){ 
l += p.offsetLeft; 
t += p.offsetTop; 
p = p.offsetParent; 
} 
return { left: l, top: t, width: w, height: h }; 
} 

에서 함수 getClient()는 브 라 우 저 클 라 이언 트 지역 정 보 를 되 돌려 주 고 getSubClient()는 대상 모듈 지역 정 보 를 되 돌려 줍 니 다.이때 목표 모듈 이 클 라 이언 트 구역 에 나타 나 는 지 여 부 를 확인 하 는 것 은 실제 적 으로 상기 두 사각형 이 교차 하 는 지 여 부 를 확인 하 는 것 이다.

 
//           ,        
function intens(rec1, rec2){ 
var lc1, lc2, tc1, tc2, w1, h1; 
lc1 = rec1.left + rec1.width / 2; 
lc2 = rec2.left + rec2.width / 2; 
tc1 = rec1.top + rec1.height / 2 ; 
tc2 = rec2.top + rec2.height / 2 ; 
w1 = (rec1.width + rec2.width) / 2 ; 
h1 = (rec1.height + rec2.height) / 2; 
return Math.abs(lc1 - lc2) < w1 && Math.abs(tc1 - tc2) < h1 ; 
} 

현재 기본적으로 시간 지연 로드 를 실현 할 수 있 습 니 다.그 다음 에 우 리 는 window.onscroll 이벤트 에서 일부 코드 를 작성 하여 목표 구역 이 클 라 이언 트 구역 에 나타 나 는 지 모니터링 할 수 있 습 니 다.

 
<div style="width:100px; height:3000px"></div> 
<div id="div1" style="width:50px; height:50px; background:red; position:absolute; top:1000px"> 
</div> 

 
var div1 = document.getElementById("div1"); 
window.onscroll = function(){ 
var prec1 = getClient(); 
var prec2 = getSubClient(div1); 
if (intens(prec1, prec2)) { 
alert("true"); 
} 
}; 

팝 업 창 에 필요 한 자원 을 불 러 오기 만 하면 됩 니 다.여기 서 주의해 야 할 것 은 대상 이 고객 구역 에 나타 날 때 스크롤 에 따라 끊임없이 팝 업 창 이 나타 납 니 다.따라서 우 리 는 첫 번 째 창 이 나 온 후에 이 지역 에 대한 감 측 을 취소 해 야 한다.여 기 는 하나의 배열 로 감 측 해 야 할 대상 을 수집 하 는 동시에 감 측 된 논 리 를 추출 해 야 한다.또한 onscroll 이벤트 와 onresize 이벤트 가 관광 기의 시각 적 지역 정 보 를 바 꿀 수 있 으 므 로 이러한 이벤트 가 발생 한 후에 다시 계산 해 야 합 니 다.여 기 는 autocheck()함수 로 이 루어 집 니 다.원소 증가:

 
<div id="div2" style="width:50px; height:50px; background:blue; position:absolute; top:2500px"> 

 
//                   
function jiance(arr, prec1, callback){ 
var prec2; 
for (var i = arr.length - 1; i >= 0; i--) { 
if (arr[i]) { 
prec2 = getSubClient(arr[i]); 
if (intens(prec1, prec2)) { 
callback(arr[i]); 
//      ，     
delete arr[i]; 
} 
} 
} 
} 

 
//                
function autocheck(){ 
var prec1 = getClient(); 
jiance(arr, prec1, function(obj){ 
//     ... 
alert(obj.innerHTML); 
}) 
} 
//      
var d1 = document.getElementById("d1"); 
//      
var d2 = document.getElementById("d2"); 
//            
var arr = [d1, d2]; 
window.onscroll = function(){ 
//      
　　autocheck(); 
} 
window.onresize = function(){ 
//      
autocheck(); 
}