원생 Js 페이지 스크롤 지연 로드 이미지 실현 원리 및 과정

원리 와 과정 1.페이지 스크롤 로 딩 이벤트 2.페이지 에 있 는 요소 의 top 값 을 가 져 옵 니 다.스크롤 바 의 위치 에 따라 그림 을 언제 표시 할 지 판단 합 니 다.3.요소 집합 으로 불 러 온 그림 을 가 져 옵 니 다.집합 에서 효과 미리 보기 삭제:http://jsfiddle.net/dtdxrk/SkYNq/embedded/result/

 
<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>  Js          </title> 
<style type="text/css"> 
*{margin: 0;padding: 0} 
img.scrollLoading{border: 1px solid #ccc;display: block;margin-top: 10px;} 
</style> 
</head> 
<body> 
<div id="content"></div> 
</body> 
</html> 
<script type="text/javascript"> 
var _CalF = { 
$ : function(object){//    
if(object === undefined ) return; 
var getArr = function(name,tagName,attr){ 
var tagName = tagName || '*', 
eles = document.getElementsByTagName(tagName), 
clas = (typeof document.body.style.maxHeight === "undefined") ? "className" : "class";//ie6 
attr = attr || clas, 
Arr = []; 
for(var i=0;i<eles.length;i++){ 
if(eles[i].getAttribute(attr)==name){ 
Arr.push(eles[i]); 
} 
} 
return Arr; 
}; 
if(object.indexOf('#') === 0){ //#id 
return document.getElementById(object.substring(1)); 
}else if(object.indexOf('.') === 0){ //.class 
return getArr(object.substring(1)); 
}else if(object.match(/=/g)){ //attr=name 
return getArr(object.substring(object.search(/=/g)+1),null,object.substring(0,object.search(/=/g))); 
}else if(object.match(/./g)){ //tagName.className 
return getArr(object.split('.')[1],object.split('.')[0]); 
} 
}, 
getPosition : function(obj) { //               
var top = 0, 
left = 0, 
width = obj.offsetWidth, 
height = obj.offsetHeight; 
while(obj.offsetParent){ 
top += obj.offsetTop; 
left += obj.offsetLeft; 
obj = obj.offsetParent; 
} 
return {"top":top,"left":left,"width":width,"height":height}; 
} 
}; 

//    list 
var _temp = []; 
for (var i = 1; i < 21; i ++) { 
_temp.push('<img class="scrollLoading" data-src="http://images.cnblogs.com/cnblogs_com/Darren_code/311197/o_' + i + '.jpg" src="http://images.cnitblog.com/blog/150659/201306/23160223-c81dd9aa9a2a4071a47b0ced2c9118bc.gif" /><br />  ' + i); 
} 
_CalF.$("#content").innerHTML = _temp.join(""); 

function scrollLoad(){ 
this.init.apply(this, arguments); 
} 
scrollLoad.prototype ={ 
init : function(className){ 
var className = "img."+className, 
imgs = _CalF.$(className), 
that = this; 
this.imgs = imgs; 
that.loadImg(); 
window.onscroll = function(){ 
that.time = setTimeout(function(){ 
that.loadImg(); 
},400); 
} 
}, 
loadImg : function(){ 
var imgs = this.imgs.reverse(), //       
len = imgs.length; 
if(imgs.length===0){ 
clearTimeout(this.time); 
return; 
} 
for(var j=len-1;j>=0;j--){ //   
var img = imgs[j], 
imgTop = _CalF.getPosition(img).top, 
imgSrc = img.getAttribute("data-src"), 
offsetPage = window.pageYOffset ? window.pageYOffset : window.document.documentElement.scrollTop,//    top  
bodyHeight = document.documentElement.clientHeight; //body    
if((offsetPage+bodyHeight/2) > (imgTop-bodyHeight/2)){ 
img.src = imgSrc; 
this.imgs.splice(j,1); 
} 
} 
} 
} 

var img1 = new scrollLoad("scrollLoading"); 
</script>

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

원생 Js 페이지 스크롤 지연 로드 이미지 실현 원리 및 과정

좋은 웹페이지 즐겨찾기