**图片懒加载**

图片懒加载

由于过多的图片会严重影响网页的加载速度，并且移动网络下的流量消耗巨大，所以说延迟加载几乎是标配了。

 图片懒加载的原理很简单，就是我们先设置图片的data-set属性（当然也可以是其他任意的，只要不会发送http请求就行了，作用就是为了存取值）值为其图片路径，由于不是src，所以不会发送http请求。 然后我们计算出页面scrollTop的高度和浏览器的高度之和， 如果图片举例页面顶端的坐标Y（相对于整个页面，而不是浏览器窗口）小于前两者之和，就说明图片就要显示出来了（合适的时机，当然也可以是其他情况），这时候我们再将 data-set 属性替换为 src 属性即可

懒加载的意义及实现方式有：

意义： 懒加载的主要目的是作为服务器前端的优化，减少请求数或延迟请求数。

实现方式：

  1.第一种是纯粹的延迟加载，使用setTimeOut或setInterval进行加载延迟.

2.第二种是条件加载，符合某些条件，或触发了某些事件才开始异步下载。

3.第三种是可视区加载，即仅加载用户可以看到的区域，这个主要由监控滚动条来实现，一般会在距用户看到某图片前一定距离遍开始加载，这样能保证用户拉下时正好能看到图片。
html
<ul>
        <li data-src="http://pic.58pic.com/58pic/17/18/97/01U58PIC4Xr_1024.jpg"><i></i></li>
   </ul>		

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

// （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; //　每次你使用自定义data属性的时候，使用dataset去获取名-值对就是个不错的选择
	    }else{
	        src = obj.getAttribute('data-src');  //getAttribute() 方法返回指定属性名的属性值。  语法element.getAttribute(字符串值)
	    }
	    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){
//obj.offsetTop 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算上侧位置，整型，单位像素。
h += obj.offsetTop;
console.log(h)
obj = obj.offsetParent;
}
return h;
}

// （3）滚动实时计算所到区域计算“节点到顶部距离”与“滚动条滚动距离”的大小，当“滚动条滚动距离”大于“节点到顶部距离”时开始创建一个img（（1）的函数）
/* 滚动实时计算所到区域并进行相关计算 */
window.onscroll = function(){
var t = document.documentElement.clientHeight + (document.body.scrollTop || document.documentElement.scrollTop);
console.log(t) // 当前屏幕的高度

		//scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置。
	    for(var i=0;i<aLi.length;i++){
	        if(getTop(aLi[i]) < t){  
	            setTimeout('createImg(aLi['+i+'])',500)
	        }
	    } 
	}
	
	/* 页面加载完便执行一次滚动函数 */
	window.onload = function(){
	    window.onscroll();
	}