图片懒加载

把网页里的img标签里的src替换成data-src，img标签没有src属性就不会向浏览器发出请求

// 获取到浏览器顶部的距离
        	function getTop(elem){
        	    
        	    var elemTop=elem.offsetTop;//获得elem元素距相对定位的父元素的top

            　　elem=elem.offsetParent;//将elem换成起相对定位的父元素
            
            　　while(elem!=null){//只要还有相对定位的父元素 
            
            　　　　//获得父元素 距他父元素的top值,累加到结果中
            
            　　　　elemTop+=elem.offsetTop;
            
            　　　　//再次将elem换成他相对定位的父元素上;
            
            　　　　elem=elem.offsetParent;
            
            　　}
        		return elemTop;
        	}
			
			// 懒加载实现
        	function lazyload(imgs){
        		// 可视区域高度
        		var h = window.innerHeight;
        		//滚动区域高度
        		var s = document.documentElement.scrollTop || document.body.scrollTop;
        		for(var i=0;i<imgs.length;i++){
        			//图片距离顶部的距离大于可视区域和滚动区域之和时懒加载
        			//加800是为了让图片在距可显示的地方800px的距离就开始加载而不是到了显示的地方现加载
        			if ((h+s+800)>getTop(imgs[i])) {
        				// 真实情况是页面开始有2秒空白，所以使用setTimeout定时2s
        				(function(i){
        				    
        				// 	setTimeout(function(){
        						// 不加立即执行函数i会等于9
        						// 隐形加载图片或其他资源，
        						//创建一个临时图片，这个图片在内存中不会到页面上去。实现隐形加载
        						var src = imgs[i].getAttribute('data-src');
        						if (src == null) return false;//不知到为什么src有时为null
        						var temp = new Image();
        						temp.src = src;//只会请求一次
        						// onload判断图片加载完毕，真是图片加载完毕，再赋值给dom节点
        						temp.onload = function(){
        							// 获取自定义属性data-src，用真图片替换假图片
        							imgs[i].src = imgs[i].getAttribute('data-src')
        						}
        				// 	},2000)
        				})(i)
        			}
        		}
        	}
        	lazyload(imgs);

在滚动事件里监听图片是否到了该显示的地方

$(document).scroll(function() {
				
				lazyload(imgs);
}）