原理和过程
1.页面滚动加载事件
2.获取元素在页面里的top值 根据滚动条的位置 判断何时显示图片
3.获取元素集合 加载过的图片从集合里删除
效果预览：http://jsfiddle.net/dtdxrk/SkYNq/embedded/result/
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>原生Js页面滚动延迟加载图片</title> 6 <style type="text/css"> 7 *{margin: 0;padding: 0} 8 img.scrollLoading{border: 1px solid #ccc;display: block;margin-top: 10px;} 9 </style> 10 </head> 11 <body> 12 13 <div id="content"></div> 14 15 </body> 16 </html> 17 18 <script type="text/javascript"> 19 var _CalF = { 20 $ : function(object){//选择器 21 if(object === undefined ) return; 22 var getArr = function(name,tagName,attr){ 23 var tagName = tagName || '*', 24 eles = document.getElementsByTagName(tagName), 25 clas = (typeof document.body.style.maxHeight === "undefined") ? "className" : "class";//ie6 26 attr = attr || clas, 27 Arr = []; 28 for(var i=0;i<eles.length;i++){ 29 if(eles[i].getAttribute(attr)==name){ 30 Arr.push(eles[i]); 31 } 32 } 33 return Arr; 34 }; 35 36 if(object.indexOf('#') === 0){ //#id 37 return document.getElementById(object.substring(1)); 38 }else if(object.indexOf('.') === 0){ //.class 39 return getArr(object.substring(1)); 40 }else if(object.match(/=/g)){ //attr=name 41 return getArr(object.substring(object.search(/=/g)+1),null,object.substring(0,object.search(/=/g))); 42 }else if(object.match(/./g)){ //tagName.className 43 return getArr(object.split('.')[1],object.split('.')[0]); 44 } 45 }, 46 getPosition : function(obj) { //获取元素在页面里的位置和宽高 47 var top = 0, 48 left = 0, 49 width = obj.offsetWidth, 50 height = obj.offsetHeight; 51 52 while(obj.offsetParent){ 53 top += obj.offsetTop; 54 left += obj.offsetLeft; 55 obj = obj.offsetParent; 56 } 57 58 return {"top":top,"left":left,"width":width,"height":height}; 59 } 60 }; 61 62 63 //添加图片list 64 var _temp = []; 65 for (var i = 1; i < 21; i ++) { 66 _temp.push('<img class="scrollLoading" data-src="http://images.cnblogs.com/cnblogs_com/Darren_code/311197/o_' + i + '.jpg" src="https://images0.cnblogs.com/blog/150659/201306/23160223-c81dd9aa9a2a4071a47b0ced2c9118bc.gif" /><br />图片' + i); 67 } 68 _CalF.$("#content").innerHTML = _temp.join(""); 69 70 71 function scrollLoad(){ 72 this.init.apply(this, arguments); 73 } 74 75 scrollLoad.prototype ={ 76 init : function(className){ 77 var className = "img."+className, 78 imgs = _CalF.$(className), 79 that = this; 80 this.imgs = imgs; 81 that.loadImg(); 82 window.onscroll = function(){ 83 that.time = setTimeout(function(){ 84 that.loadImg(); 85 },400); 86 } 87 }, 88 loadImg : function(){ 89 var imgs = this.imgs.reverse(), //获取数组翻转 90 len = imgs.length; 91 92 if(imgs.length===0){ 93 clearTimeout(this.time); 94 return; 95 } 96 for(var j=len-1;j>=0;j--){ //递减 97 var img = imgs[j], 98 imgTop = _CalF.getPosition(img).top, 99 imgSrc = img.getAttribute("data-src"), 100 offsetPage = window.pageYOffset ? window.pageYOffset : window.document.documentElement.scrollTop,//滚动条的top值 101 bodyHeight = document.documentElement.clientHeight; //body的高度 102 if((offsetPage+bodyHeight/2) > (imgTop-bodyHeight/2)){ 103 img.src = imgSrc; 104 this.imgs.splice(j,1); 105 } 106 } 107 } 108 } 109 110 111 var img1 = new scrollLoad("scrollLoading"); 112 113 </script>