<strong>原理與流程</strong> <br>1.頁面捲動載入事件<br>2.取得元素在頁面裡的top值根據捲軸的位置判斷何時顯示圖片<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> <br> <br> <br><meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <br><title>原生Js頁面滾動延遲載入圖片</title> <br><style type="text/css"> <BR>*{margin: 0;padding: 0} <BR>img.scrollLoading{border: 1px solid #ccc;display: block;margin-top: 10px;} <BR></style> <br> <br> <br><div id="content"></div> <br> <br> <br><script type="text/javascript"> <BR>var _CalF = { <BR>$ : function(object){//選擇器<BR>if(object === undefined ) return; <BR>var getArr = function(name,tagName,attr){ <BR>var tagName = tagName | | '*', <BR>eles = document.getElementsByTagName(tagName), <BR>clas = (typeof document.body.style.maxHeight === "undefined") ? "className" : "class";//ie6 <BR>attr = attr || clas, <BR>Arr = []; <BR>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(objectr=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"obj.offsetParent; <BR>} <br>return {"top":top" ,"left":left,"width":width,"height":height}; <br>} <BR>}; <BR><BR>//新增圖片 list <BR>var _temp = []; <BR>for (var i = 1; i < 21; i ) { <br>_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-c81dd99a2a4071a47b0ced2c9118bc. /圖片🎜 alt="原生Js頁面滾動延遲載入圖片實現原理及過程_javascript技巧" >_CalF.$("#content").innerHTML = _temp.join(""); <br><BR>function scrollLoad(){ <BR>this.init.apply(this, arguments); <BR> } <BR>scrollLoad.prototype ={ <BR>init : function(className){ <BR>var className = "img." className, <BR>imgs = _CalF.$(className), <BR>that = this; <BR>this.imgs = imgs; <BR>that.loadImg(); <BR>window.onscroll = function(){ <BR>that.time = setTimeout(function(){ <BR>that.loadImg() ; <BR>},400); <BR>} <BR>}, <BR>loadImg : function(){ <BR>var imgs = this.imgs.reverse(), //取得陣列翻轉<BR>len = imgs.length; <BR>if(imgs.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,//捲軸的top值<BR>bodyHeight = document.documentElement.clientHeight; >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> <br> </div>
