版权声明：本文为博主原创文章，转载请附上博文链接！ https://blog.csdn.net/csdnluolei/article/details/83933065
当一个页面有很多数据的时候，需要全部加载后，才显示，网速不好时需要等很久。当用懒加载后，就只加载可视区的数据，反应更快，效果更好。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>js Learning -懒加载</title>
<style type="text/css">
#box{
width:80%;
margin:0 auto;
}
#box li{
list-style: none;
width:180px;
height:250px;
border: 1px solid black;
float:left;
margin-left: 20px;
margin-top: 20px;
}
#box img{
width:100%;
height:100%;
}
</style>
</head>
<body>
<div id='box'>
<li><img alt="懒加载" _src="img/1.png"/></li>
<li><img alt="懒加载" _src="img/1.png"/></li>
<li><img alt="懒加载" _src="img/1.png"/></li>
<li><img alt="懒加载" _src="img/1.png"/></li>
<li><img alt="懒加载" _src="img/1.png"/></li>
<li><img alt="懒加载" _src="img/1.png"/></li>
<li><img alt="懒加载" _src="img/1.png"/></li>
<li><img alt="懒加载" _src="img/1.png"/></li>
<li><img alt="懒加载" _src="img/1.png"/></li>
<li><img alt="懒加载" _src="img/1.png"/></li>
<li><img alt="懒加载" _src="img/1.png"/></li>
<li><img alt="懒加载" _src="img/1.png"/></li>
<li><img alt="懒加载" _src="img/1.png"/></li>
<li><img alt="懒加载" _src="img/1.png"/></li>
<li><img alt="懒加载" _src="img/1.png"/></li>
<li><img alt="懒加载" _src="img/1.png"/></li>
<li><img alt="懒加载" _src="img/1.png"/></li>
<li><img alt="懒加载" _src="img/1.png"/></li>
<li><img alt="懒加载" _src="img/1.png"/></li>
<li><img alt="懒加载" _src="img/1.png"/></li>
<li><img alt="懒加载" _src="img/1.png"/></li>
<li><img alt="懒加载" _src="img/1.png"/></li>
<li><img alt="懒加载" _src="img/1.png"/></li>
<li><img alt="懒加载" _src="img/1.png"/></li>
<li><img alt="懒加载" _src="img/1.png"/></li>
<li><img alt="懒加载" _src="img/1.png"/></li>
<li><img alt="懒加载" _src="img/1.png"/></li>
<li><img alt="懒加载" _src="img/1.png"/></li>
<li><img alt="懒加载" _src="img/1.png"/></li>
<li><img alt="懒加载" _src="img/1.png"/></li>
<li><img alt="懒加载" _src="img/1.png"/></li>
<li><img alt="懒加载" _src="img/1.png"/></li>
<li><img alt="懒加载" _src="img/1.png"/></li>
<li><img alt="懒加载" _src="img/1.png"/></li>
<li><img alt="懒加载" _src="img/1.png"/></li>
<li><img alt="懒加载" _src="img/1.png"/></li>
<li><img alt="懒加载" _src="img/1.png"/></li>
<li><img alt="懒加载" _src="img/1.png"/></li>
<li><img alt="懒加载" _src="img/1.png"/></li>
<li><img alt="懒加载" _src="img/1.png"/></li>
<li><img alt="懒加载" _src="img/1.png"/></li>
<li><img alt="懒加载" _src="img/1.png"/></li>
<li><img alt="懒加载" _src="img/1.png"/></li>
<li><img alt="懒加载" _src="img/1.png"/></li>
<li><img alt="懒加载" _src="img/1.png"/></li>
<li><img alt="懒加载" _src="img/1.png"/></li>
<li><img alt="懒加载" _src="img/1.png"/></li>
<li><img alt="懒加载" _src="img/1.png"/></li>
<li><img alt="懒加载" _src="img/1.png"/></li>
<li><img alt="懒加载" _src="img/1.png"/></li>
<li><img alt="懒加载" _src="img/1.png"/></li>
<li><img alt="懒加载" _src="img/1.png"/></li>
<li><img alt="懒加载" _src="img/1.png"/></li>
<li><img alt="懒加载" _src="img/1.png"/></li>
<li><img alt="懒加载" _src="img/1.png"/></li>
<li><img alt="懒加载" _src="img/1.png"/></li>
<li><img alt="懒加载" _src="img/1.png"/></li>
<li><img alt="懒加载" _src="img/1.png"/></li>
<li><img alt="懒加载" _src="img/1.png"/></li>
<li><img alt="懒加载" _src="img/1.png"/></li>
<li><img alt="懒加载" _src="img/1.png"/></li>
<li><img alt="懒加载" _src="img/1.png"/></li>
<li><img alt="懒加载" _src="img/1.png"/></li>
<li><img alt="懒加载" _src="img/1.png"/></li>
<li><img alt="懒加载" _src="img/1.png"/></li>
<li><img alt="懒加载" _src="img/1.png"/></li>
<li><img alt="懒加载" _src="img/1.png"/></li>
<li><img alt="懒加载" _src="img/1.png"/></li>
<li><img alt="懒加载" _src="img/1.png"/></li>
<li><img alt="懒加载" _src="img/1.png"/></li>
<li><img alt="懒加载" _src="img/1.png"/></li>
<li><img alt="懒加载" _src="img/1.png"/></li>
<li><img alt="懒加载" _src="img/1.png"/></li>
<li><img alt="懒加载" _src="img/1.png"/></li>
</div>
</body>
<script type="text/javascript">
//获取所有图片
var aImage = document.getElementsByTagName('img');
//获取可视区高度
var height = document.documentElement.clientHeight;
//当滚动时触发
window.onload = window.onscroll = function(){
//得到滚动卷起高度
var scrollTop = document.documentElement.scrollTop;
//遍历所有图片
for(var i = 0 ; i < aImage.length ; i++ ){
//获取该图片举例网页顶部和可视区高度,判断是否显示
//距网页顶部高度
var top = aImage[i].offsetTop;
console.log('scrollTop='+scrollTop);
console.log(top +"<="+ height + scrollTop);
if(top <= height + scrollTop){
aImage[i].src = aImage[i].getAttribute('_src');
}
}
};
</script>
</html>