LazyLoad 지연 로드(필요 에 따라 불 러 오기)

12378 단어 LazyLoad로드 지연
1:실제 수요 대형 사 이 트 는 갈등 이 많 습 니 다.사용자 가 홈 페이지 에서 더 많은 것 을 보고 싶 고 서버 트 래 픽 을 너무 많이 낭비 하고 싶 지 않 습 니 다.예 를 들 어 세 화면 이 있 는 첫 페이지.사용자 의 50%가 홈 페이지 에 들 어 갈 수 있 는 목적 은 홈 페이지 의 연결 을 클릭 하여 하위 페이지 로 가 는 것 입 니 다.그러면 우리 사 이 트 는 100%의 사용 자 를 위해 세 개의 화면의 모든 내용 을 불 러 왔 다.필요 에 따라 내용 을 불 러 올 수 있다 면.더 많은 자원 을 절약 하고 더 좋 은 응용 을 할 수 있다.2:솔 루 션 은 클 라 이언 트 언어 로 사용자 의 현재 시각 적 범 위 를 판단 하고 사용자 의 시각 적 범위 의 내용 만 불 러 옵 니 다.가장 중요 한 것 은 그림 이다.문자 정보 가 상대 적 으로 작 기 때문에 다른 멀티미디어 콘 텐 츠 는 서버 트 래 픽 을 상대 적 으로 많이 차지한다.3:프 리 젠 테 이 션 예(마지막 제공)4:분석 은 먼저 우리 가 분석 해 야 한다.이 효 과 는 가장 바깥 용기 가 있 을 것 이다.그 는 로 딩 지연 이 필요 하 다 는 내용 을 포함 했다.용 기 는 일반적으로 브 라 우 저 창 자체(window)나 스크롤 바 가 있 는 DIV 일 수 있 습 니 다.OK,우 리 는 이 용기 의 일부 인 자 를 가 져 와 야 합 니 다.예 를 들 어 시각 너비,시각 높이,수평 볼 륨 너비,수직 볼 륨 높이 등 이다.나 는 아래 의 프로그램 을 사용한다.4.1:용기 대상 속성 
 
_this.docInfo=function(){//          
var d={},db= (wf)? document.body : warpper, 
dd=(wf) ? document.documentElement : warpper; 
if(sys.ie){ 
d.offh=dd.offsetHeight;//    H 
d.offw=dd.offsetWidth;//    W 
}else{ 
if(wf){ 
d.offw=window.innerWidth;//    H 
d.offh=window.innerHeight;//    W 
}else{ 
d.offh=dd.offsetHeight;//    H 
d.offw=dd.offsetWidth;//    W 
} 
} 
d.jtop=(wf) ? db.scrollTop+dd.scrollTop : db.scrollTop ;//       
d.jleft=(wf) ? db.scrollLeft+dd.scrollLeft : db.scrollLeft;//       
//       window        div        scrollLeft OK 
$j("bbb").innerHTML=d.offh+','+d.offw+','+d.jtop+','+d.jleft 
return d; 
} 
//    IE         window          offsetHeight   offsetWidth （ IE   ） 
//  IE     window             window.innerWidth  window.innerHeight 
//      IE    window    window                。
4.2 획득:로드 내용 의 정 보 를 얻 으 려 면 저 희 는 주로 로드 대상 이 페이지 용기 대상 에서 의 거 리 를 얻 습 니 다.IE 6 7 에는 BUG 

wtop=sys.ie ? (sys.ie[1]=='6.0' || sys.ie[1]=='7.0') ? 0 : warpper.offsetTop : warpper.offsetTop, 
wleft=sys.ie ? (sys.ie[1]=='6.0' || sys.ie[1]=='7.0') ? 0 : warpper.offsetLeft : warpper.offsetLeft,
 
getoff=function(o){//  IMG    offw and offh 
o.innerHTML=(o.offsetTop-wtop) +','+ (o.offsetLeft-wleft); 
return (o.offsetTop-wtop) +','+ (o.offsetLeft-wleft); 
//   o.offsetTop  chrome   window.onload         
};
4.3 이 있 습 니 다.로 딩 메 인 프로그램 은 현재 시각 적 범위 내 에서 대상 을 불 러 오 는 것 을 책임 집 니 다.그러면 불 러 올 대상 을 모두 옮 겨 다 녀 야 합 니 다.대상 이 현재 로드 중 인지 판단 합 니 다.그리고 불 러 와.내 밑 에 그림 이 하나 있 을 거 야.방법 이 좋 지 않 을 수도 있 습 니 다)
 
_this.Load=function(){ 
var hereline=[]; 
hereline[1]=doc.offh+doc.jtop; 
hereline[2]=doc.offw+doc.jleft; 
for(i=0;i<imgs.length;i++){ 
if(imgs[i][1] != undefined){//              
var jj=hereline[1] - imgs[i][1] < doc.offh +130 && hereline[1] - imgs[i][1] > 0 ? true : false, 
jjj=hereline[2] - imgs[i][2] < doc.offw +270 && hereline[2] - imgs[i][2] > 0 ? true : false; 
if(jj && jjj){ 
imgall[i].innerHTML+=' '+(++j)+'   '; 
imgs[i][1]=undefined; 
} 
} 
} 
if( j >= imgs.length){//             
//       
alert("        ，       ") 
warpper.onscroll=null; 
warpper.onresize=null; 
} 
}
저 는 제 판단 절 차 를 별로 좋아 하지 않 지만 잠시 찾 지 못 했 거나 더 좋 은 알고리즘 을 이해 하지 못 했 습 니 다.그래서 이 걸 먼저 썼어 요.대체로 용기 의 시각 높이+용기 스크롤 높이-대상 거리 용기 거리>용기 시각+대상 본 키 또는 너비 로 로드 범위 임 을 증명 합 니 다.(잰말놀이)우 리 는 이미 불 러 온 대상 을 제외 해 야 한다.불 러 온 대상 도 이상 의 공식 을 만족 시 키 는 동시에 판단 을 적 게 할 수 있 기 때문이다.imgs[i][1]=undefined; if(imgs[i][1] != undefined){//현재 대상 이 불 러 왔 는 지 판단 합 니 다.각각 4 개의 서로 다른 뿔 이 시각 범위 내 에 드 러 났 다.그래서 이 네 개의 대상 은 불 러 와 야 합 니 다.대상 의 어떤 점 이나 어떤 선 만 을 고려 해 대상 이 시각 적 범위 에 있 는 지 판단 하면 좋 지 않 은 체험 을 할 수 있다.위의 상황 이 있 기 때문에 우리 의 프로 그래 밍(시각 적 범위 내 에 있 는 지 판단)에 도 어려움 을 증가 시 켰 다.내 위의 방법 은 완성 할 수 있다.버그 를 발견 하면 가르쳐 주세요.사실 나 도 좀 어 지 러 워.)마지막 으로 몇 가지 기술 이 있 습 니 다.예 를 들 어 1:대상 을 모두 불 러 왔 습 니 다.용기 대상 이벤트 트리거 를 제거 해 야 합 니 다.2:대상 이 시각 적 범위 에 있 는 지,또는 옮 겨 다 니 는 대상 의 알고리즘 을 최대한 최적화 합 니 다.많은 브 라 우 저 자원 을 절약 할 수 있다.3:cloudgamer 는 또 하나의 지연 트리거 를 언급 했다.바로 빠 른 미끄럼 스크롤 바 이 고 지연 시 키 는 것 도 작은 최적화 이다.5:클 라 우 드 게 이 머 를 추천 하 는 그 는 상세 하고 나 보다 잘 한다.그래서 이 효 과 를 배 워 보 는 것 을 추천 합 니 다.많은 것들 을 나 도 그 를 거울 로 삼 았 다.그리고 조언 감사합니다.Lazyload 로드 지연 효과 6:나의 소스 코드 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>lazyload</title> 
</head> 
<body> 
<style type="text/css"> 
body{ margin:0px; padding:0; font-size:12px;} 
.jelle_box{width:270px; height:129px; border:1px solid #CCC; float:left;} 
</style> 
<input type="button" value="    " onclick="lazyload().judge();" /> 
<div style="width:100%; height:500px; overflow:scroll; border:2px solid #999;" id="jelle_abcd"> 
<div id="aaa" style="width:2500px; height:800px; margin:10px;"> 
<div class="jelle_box"></div> 
<div class="jelle_box"></div> 
<div class="jelle_box"></div> 
<div class="jelle_box"></div> 
<div class="jelle_box"></div> 
<div class="jelle_box"></div> 
<div class="jelle_box"></div> 
<div class="jelle_box"></div> 
<div class="jelle_box"></div> 
<div class="jelle_box"></div> 
<div class="jelle_box"></div> 
<div class="jelle_box"></div> 
<div class="jelle_box"></div> 
<div class="jelle_box"></div> 
<div class="jelle_box"></div> 
<div class="jelle_box"></div> 
<div class="jelle_box"></div> 
<div class="jelle_box"></div> 
<div class="jelle_box"></div> 
<div class="jelle_box"></div> 
<div class="jelle_box"></div> 
<div class="jelle_box"></div> 
<div class="jelle_box"></div> 
<div class="jelle_box"></div> 
<div class="jelle_box"></div> 
<div class="jelle_box"></div> 
<div class="jelle_box"></div> 
<div class="jelle_box"></div> 
<div class="jelle_box"></div> 
<div class="jelle_box"></div> 
<div class="jelle_box"></div> 
<div class="jelle_box"></div> 
<div class="jelle_box"></div> 
<div class="jelle_box"></div> 
<div class="jelle_box"></div> 
<div class="jelle_box"></div> 
<div class="jelle_box"></div> 
<div class="jelle_box"></div> 
<div class="jelle_box"></div> 
<div class="jelle_box"></div> 
<div class="jelle_box"></div> 
<div class="jelle_box"></div> 
<div class="jelle_box"></div> 
<div class="jelle_box"></div> 
<div class="jelle_box"></div> 
<div class="jelle_box"></div> 
<div class="jelle_box"></div> 
<div class="jelle_box"></div> 
<div class="jelle_box"></div> 
</div> 
</div> 
<div style=" height:30px" id="bbb"></div> 
<script type="text/javascript"> 
(function(){ 
window.lazyload=function(){ 
var _this={},//     
imgsurl=['baidu_logo_2.gif']//           。               
imgs=[],//  IMG        [[url,offw,offh],[url,offw,offh]] 
i=0,//     
j=0,//          
warpper=document.getElementById('jelle_abcd'),//window,//     
wf=(warpper==window) ? true : false; 
doc={offw:0,offh:0,jtop:0,jleft:0},//                 
sys=(function(){//                 ,                
var ua=navigator.userAgent.toLowerCase(),sys={}; 
sys.firefox=ua.match(/firefox\/([\d\.]+)/); 
sys.ie=ua.match(/msie\s([\d\.]+)/); 
sys.chrome=ua.match(/chrome\/([\d\.]+)/); 
return sys; 
})(), 
$j=function(id){return document.getElementById(id);}, 
imgall=$j('aaa').getElementsByTagName('DIV'), 
getoff=function(o){//  IMG    offw and offh 
//alert(o.width) 
o.innerHTML=(o.offsetTop-warpper.offsetTop) +','+ (o.offsetLeft-warpper.offsetLeft); 
return (o.offsetTop-warpper.offsetTop) +','+ (o.offsetLeft-warpper.offsetLeft); 
//   o.offsetTop  chrome   window.onload         
}; 
//o.offsetTop                                。（    window      ） 
(function(){//           == 
if(wf){ 
window.onscroll=function(){_this.judge();}; 
window.onresize=function(){_this.judge();}; 
}else{ 
warpper.onscroll=function(){_this.judge();} 
warpper.onresize=function(){_this.judge();} 
} 
window.onload=function(){setTimeout(_this.judge,500);}; 
})() 
//         
for( i ; i<imgall.length ; i++ ){//   imgs    
var arr=[],off; 
off=getoff(imgall[i]); 
//alert(off) 
arr.push(imgsurl[0]); 
arr.push((off.split(',')[0])); 
arr.push((off.split(',')[1])); 
imgs.push(arr); 
} 
_this.Load=function(){ 
var hereline=[]; 
hereline[1]=doc.offh+doc.jtop; 
hereline[2]=doc.offw+doc.jleft; 
for(i=0;i<imgs.length;i++){ 
if(imgs[i][1] != undefined){//              
var jj=hereline[1] - imgs[i][1] < doc.offh +130 && hereline[1] - imgs[i][1] > 0 ? true : false, 
jjj=hereline[2] - imgs[i][2] < doc.offw +270 && hereline[2] - imgs[i][2] > 0 ? true : false; 
if(jj && jjj){ 
imgall[i].innerHTML+=' '+(++j)+'   '; 
imgs[i][1]=undefined; 
} 
} 
} 
if( j >= imgs.length){//             
//       
alert("        ，       ") 
warpper.onscroll=null; 
warpper.onresize=null; 
} 
} 
_this.docInfo=function(){//          
var d={},db= (wf)? document.body : warpper, 
dd=(wf) ? document.documentElement : warpper; 
if(sys.ie){ 
d.offh=dd.offsetHeight;//    H 
d.offw=dd.offsetWidth;//    W 
}else{ 
if(wf){ 
d.offw=window.innerWidth;//    H 
d.offh=window.innerHeight;//    W 
}else{ 
d.offh=dd.offsetHeight;//    H 
d.offw=dd.offsetWidth;//    W 
} 
} 
d.jtop=(wf) ? db.scrollTop+dd.scrollTop : db.scrollTop ;//       
d.jleft=(wf) ? db.scrollLeft+dd.scrollLeft : db.scrollLeft;//       
//       window        div        scrollLeft OK 
$j("bbb").innerHTML=d.offh+','+d.offw+','+d.jtop+','+d.jleft 
return d; 
} 
//    IE         window          offsetHeight   offsetWidth （ IE   ） 
//  IE     window             window.innerWidth  window.innerHeight 
//      IE    window    window                。 
_this.judge=function(){//            
var d=_this.docInfo(); 
if( d.jtop != doc.jtop || d.jleft != doc.jleft || d.offw > doc.offw || d.offh > doc.offh){ 
//           
//         y x                   
doc.jtop = d.jtop; 
doc.offh = d.offh; 
doc.jleft = d.jleft; 
doc.offw = d.offw; 
_this.Load();//     
} 
} 
//setTimeout(_this.judge,500);//        
//setTimeout   onload   onscroll      
//       onscroll         onload 
return _this; 
} 
})() 
lazyload(); 
</script> 
</body> 
</html>
php 대상 Public private proctected 접근 수정자 분석
JQuery 동적 확장 대상 의 다른 시각

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage