原生Js页面滚动延迟加载图片

原理和过程
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="//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>

 

posted @ 2013-06-23 14:27  dtdxrk  阅读(1815)  评论(3)  编辑  收藏  举报