图片懒加载

介绍:
**// 图片懒加载:页面加载后只让文档可视区内的图片显示，其它不显示，随着用户对页面的滚动，判断其区域位置，生成img标签，让到可视区的图片加载出来

// 懒加载（LazyLoad）是前端优化的一种有效方式，能极大的提升用户体验，图片加载是其重点，如果加载图片过多将大大增http请求次数或大小，
// 然而更多时候用户并不会浏览到全部加载进来的图片，这种代价是非常不值得的，所以当用户浏览到当前视口时再去加载相应的图片无疑是两全其美的选择**
首先css样式
<style type="text/css"> *{margin:0;padding:0;} ul{overflow:hidden;} li{list-style:none;width:10rem;height:12rem;border:1px solid #ccc;box-sizing:border-box;-webkit-box-sizing:border-box;float:left;overflow:hidden;position:relative;} li i{width:20px;height:20px;border-radius:20px;position:absolute;border:2px solid #6feb95;z-index:0;left:50%;top:50%;margin-top:-11px;margin-left:-11px;animation:move 1s infinite;-webkit-animation:move 1s infinite;} li i:before{position:absolute;width:5px;height:5px;border-radius:4px;content:'';box-shadow:0 0 10px #666;-webkit-box-shadow:0 0 10px #666;background:#fff;border:1px solid #fff;top:-3px;left:50%;margin-left:-3px;} img{vertical-align:middle;border-width:0;width:100%;position:relative;z-index:1;} @keyframes move{ 0%{ transform:rotateZ(0); } 100%{ transform:rotateZ(360deg); } } @-webkit-keyframes move{ 0%{ -webkit-transform:rotateZ(0); } 100%{ -webkit-transform:rotateZ(360deg); } } </style>
在这里我们可以用一个ul标签
布局： <ul> <li data-src="http://pic.58pic.com/58pic/17/18/97/01U58PIC4Xr_1024.jpg"><i></i></li> <li data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p01N203pHTU7/Wr5314kcLAtVCi.jpg!t"><i></i></li> <li data-src="http://77fkxu.com1.z0.glb.clouddn.com/20160308/1457402219_73571.jpg"><i></i></li> <li data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p01a3SXHo2hZ/XYAC5TLk4uYWXn.jpg!t"><i></i></li> <li data-src="http://pic1.cxtuku.com/00/16/18/b3809a2ba0f3.jpg"><i></i></li> <li data-src="http://img.bitscn.com/upimg/allimg/c150708/14363B06253120-6060O.jpg"><i></i></li> </ul>
下面是最主要的js代码：

 （1）获取节点和节点的“data-src”属性，继而判断此节点的子节点有没有创建img，没有则动态创建img标签将其“data-src”的值赋给img的src，有则不做任何处理
		/* 获取节点 */    
		var oUl = document.getElementsByTagName('ul')[0];
		var aLi = oUl.getElementsByTagName('li');
		
		/* 创建img标签函数 */    
		function createImg(obj){
		    var src = '';
		    if(obj.dataset.src){
		        src = obj.dataset.src;
		    }else{
		        src = obj.getAttribute('data-src');
		    }
		    if(obj.children.length <= 1){
		        var img = document.createElement('img');
		        img.src = src;
		        obj.appendChild(img);
		    }
		}
		
		
//		（2）通过“offsetTop”来连续获取节点到文档顶部的距离并更新，直到节点再没有父级为止
		/* 计算节点到文档顶部的距离 */    
		function getTop(obj){
		    var h = 0;
		    while(obj){
		        h += obj.offsetTop;
		        obj = obj.offsetParent;
		    }
		    return h;
		}
	
//	（3）滚动实时计算所到区域计算“节点到顶部距离”与“滚动条滚动距离”的大小，当“滚动条滚动距离”大于“节点到顶部距离”时开始创建一个img（（1）的函数）
		/* 滚动实时计算所到区域并进行相关计算 */
		window.onscroll = function(){
		    var t = document.documentElement.clientHeight + (document.body.scrollTop || document.documentElement.scrollTop);
		    for(var i=0;i<aLi.length;i++){
		        if(getTop(aLi[i]) < t){  
		            setTimeout('createImg(aLi['+i+'])',500)
		        }
		    } 
		}
		
		/* 页面加载完便执行一次滚动函数 */
		window.onload = function(){
		    window.onscroll();
		}