<strong>원리 및 프로세스</strong> <br>1. 페이지 스크롤 로딩 이벤트<br>2. 페이지 요소의 최상위 값을 가져와서 스크롤 막대의 위치에 따라 이미지를 표시할 시기를 결정합니다<br>3. 로드할 요소 컬렉션 가져오기 컬렉션에서 과거 사진 삭제 <br> 효과 미리보기: http://jsfiddle.net/dtdxrk/SkYNq/embedded/result/ <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="16254" class="copybut" id="copybut16254" onclick="doCopy('code16254')"> <u>코드 복사</u></a></span> 코드는 다음과 같습니다. </div> <div class="codebody" id="code16254"> <br><!DOCTYPE html> <br><html> 🎜><meta http-equiv="Content- Type" content="text/html; charset=utf-8" /> <br><title>Native Js 페이지 스크롤이 지연됨 이미지 로딩</title> ><style type="text/css" > <br>*{margin: 0;padding: 0} <br>img.scrollLoading{border: 1px solid #ccc;display: block;margin-top: 10px; } <br></style> <br></head> <br><body> <br><div id="content"></div> <br></html> <br> <script type="text/javascript"> <br>var _CalF = { <br>$ : 함수(객체){//Selector<br>if(객체 = == 정의되지 않음 ) return; <br>var getArr = function(name,tagName,attr){ <br>var tagName = tagName || '*', <br>eles = document.getElementsByTagName(tagName), <br>class = (typeof document.body.style.maxHeight === "정의되지 않음") ? "className" : "class";//ie6 <br>attr = attr || clas, <br>Arr = []; for(var i=0;i<eles .length;i ){ <BR>if(eles[i].getAttribute(attr)==name){ <BR>Arr.push(eles[i]) <BR>} <BR>} <BR>return Arr; <BR>}; <BR>if(object.indexOf('#') === 0){ //#id <BR>return document.getElementById(object. substring(1)); <BR>} else if(object.indexOf('.') === 0){ //.class <BR>return getArr(object.substring(1)) <BR>}else if(object.match(/=/g )){ //attr=name <BR>return getArr(object.substring(object.search(/=/g) 1),null,object.substring(0,object. search(/=/g))); <BR>}else if(object.match(/./g)){ //tagName.className <BR>return getArr(object.split('.')[1] ,object.split('.')[ 0]); <BR>} <BR>}, <BR>getPosition : function(obj) { //페이지 요소의 위치, 너비, 높이를 가져옵니다. <BR>var top = 0, <BR>left = 0, <BR>width = obj.offsetWidth, <BR>height = obj.offsetHeight; <BR>while(obj.offsetParent){ <BR>top = obj.offsetTop; <BR>left = obj.offsetLeft; <BR>obj = obj.offsetParent; <BR>} <BR>return {"top":top,"left":left,"width":width,"height":height }; <BR>} <BR>}; <BR><BR>//사진 목록 추가 <BR>var _temp = [] <BR>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 />Picture' i); <br>} <br>_CalF.$("#content").innerHTML = _temp.join(""); <br><br>function scrollLoad(){ <br>this.init.apply(this, 인수) <br>} <br>scrollLoad.prototype ={ <br>init : function(className){ <br>var className = " img." className, <br>imgs = _CalF.$(className), <br>that = this <br>this.imgs = imgs; .loadImg(); <br>window.onscroll = function (){ <br>that.time = setTimeout(function(){ <br>that.loadImg(); <br>},400); <br>}, <br>loadImg : function() { <br>var imgs = this.imgs.reverse(), //배열 뒤집기 <br>len = imgs.length; length===0){ <br>clearTimeout(this.time) <br>return; <br>} <br>for(var j=len-1;j>=0;j--){ // 감소 <br>var img = imgs[j], <br>imgTop = _CalF.getPosition(img).top, <br>imgSrc = img.getAttribute("data-src"), <br>offsetPage = window.pageYOffset ? window.pageYOffset : window.document.documentElement.scrollTop,/ /스크롤 막대의 상단 값<br>bodyHeight = document.documentElement.clientHeight; //본문의 높이<br>if((offsetPage bodyHeight/2 ) > (imgTop-bodyHeight/2)){ <br>img.src = imgSrc <br>this.imgs.splice(j,1) <br>} <br>} <br>} <br> } <br><br>var img1 = new scrollLoad("scrollLoading") <br></script></div>