图片懒加载指的是不直接给src赋值，当图片需要显示的时候才被赋值
（比如当页面滚动时只加载当前能看到的图片，看不到的部分未加载，当页面向上滚动时，下面的图片才加载出来）
这种方式不会影响图片的显示,同时最大程度上减少服务器端的资源耗用，使网页更加流畅。
一般大型网站，图片比较多，会使用图片懒加载。
步骤：
1.给图片自定义一个属性，保存真正图片地址，src先给一张占位图（占位图一般只有一张）
2.当滚动页面，图片到达可视区，再给src赋真正地址，并且删除自定义属性
如下图：网页页面不断向上滚动，当图片A到达图片B的位置时，马上要进入到用户可视区，此时将图片的真正地址赋给src,变为真正要显示的图片，此时，sTop+cHeight=offsetT,（offsetT是图片距离页面顶部的距离）由于滚动时，sTop+cHeight或许不会刚好等于offsetT，所以当sTop+cHeight>=offsetT时，修改src
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box{
width:500px;
margin:auto;
}
#box li{
height:300px;
border:5px solid red;
margin-bottom:250px;
}
#box li img{
width:100%;
height:100%;
}
</style>
</head>
<body>
<div id="box">
<ul>
<li><img src="http://g.alicdn.com/s.gif" alt="" lazy-src="img/2.jpg"/></li>
<li><img src="http://g.alicdn.com/s.gif" alt="" lazy-src="img/3.jpg"/></li>
<li><img src="http://g.alicdn.com/s.gif" alt="" lazy-src="img/4.jpg"/></li>
<li><img src="http://g.alicdn.com/s.gif" alt="" lazy-src="img/5.jpg"/></li>
<li><img src="http://g.alicdn.com/s.gif" alt="" lazy-src="img/6.jpg"/></li>
<li><img src="http://g.alicdn.com/s.gif" alt="" lazy-src="img/7.jpg"/></li>
</ul>
</div>
<script>
//滚上去的距离+页面可视区的高度>=图片距离页面顶部的距离
//获取DOM对象--所有li元素的集合
var lists=document.querySelectorAll("#box li");
window.οnscrοll=function(){//监听页面滚动，页面滚动则触发此方法
//滚出去的距离
var sTop=getScrollTop();
//页面可视区的高度
var cHeight=getClientHeight()
for(var i=0;i<lists.length;i++){
//图片距离页面顶部的距离
var offsetT=getOffsetTop(lists[i]);
//获取到lazy-src的属性值，即图片的真正地址
var imgObj=lists[i].children[0];
var la_src=imgObj.getAttribute("lazy-src");//标签内自定义属性只能通过get/setAttribute()
//进入可视区，并且src没有被修改过（修改过的lazy-src已经被删除了，保存的是null）
if(sTop+cHeight>=offsetT&&la_src){
//修改src
imgObj.src=la_src;
//删除lazy-src属性
imgObj.removeAttribute("lazy-src");
}
}
}
//滚出去的距离（兼容谷歌和火狐）
function getScrollTop(){
return document.body.scrollTop||document.documentElement.scrollTop;
}
//获取可视区域高度
function getClientHeight(){
return window.innerHeight||document.documentElement.clientHeight;
}
//获取元素到顶部的距离
function getOffsetTop(ele){
var top=0;
//当ele是body的时候就可以跳出去了（因为body没有偏移父元素）
while(ele.offsetParent!=null){
top+=ele.offsetTop+ele.offsetParent.clientTop;
ele=ele.offsetParent;
}
return top;
}
</script>
</body>
</html>
