页面如果有很多图片的时候，当你滚动到相应的行时，当前行的图片才即时加载的，这样子的话页面在打开只加可视区域的图片，而其它隐藏的图片则不加载。避免网页打开时加载过多资源，让用户等待太久。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>懒加载</title>
<style type="text/css">
img {
background-color: red;
}
ul,li {
list-style: none;
}
ul {
overflow: hidden;
margin-top: 800px;
}
li img {
width:100%;
margin-top: 50px;
}
li {
width:200px;
margin-left: 10px;
float: left;
}
</style>
</head>
<body>
<ul id="wrap">
<li>
<img src="img/no-pic.png" data-src="img/p1.jpg">
<img src="img/no-pic.png" data-src="img/7.jpg">
<img src="img/no-pic.png" data-src="img/5.jpg">
<img src="img/no-pic.png" data-src="img/3.jpg">
</li>
<li>
<img src="img/no-pic.png" data-src="img/3.jpg">
<img src="img/no-pic.png" data-src="img/p6.jpg">
<img src="img/no-pic.png" data-src="img/p2.jpg">
</li>
<li>
<img src="img/no-pic.png" data-src="img/p5.jpg">
<img src="img/no-pic.png" data-src="img/5.jpg">
<img src="img/no-pic.png" data-src="img/2.jpg">
<img src="img/no-pic.png" data-src="img/p4.jpg">
</li>
</ul>
<script type="text/javascript">
var imgList = document.getElementById("wrap").getElementsByTagName("img");
window.onscroll = function() {//浏览器滚动时触发改事件
for(var i = 0; i < imgList.length; i++) {
var pos = imgList[i].getBoundingClientRect();
//当图片出现在屏幕上，可视区，就改变src显示真实的那张图片路径
if(pos.top <= document.documentElement.clientHeight){
imgList[i].src = imgList[i].getAttribute("data-src");
// imgList[i].setAttribute("src",imgList[i].getAttribute("data-src"))
}
}
}
</script>
</body>
</html>