<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片延迟加载</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
img{
width: 300px;
height: 300px;
border: 1px solid #CCCCCC;
position: absolute;
left: 300px;
}
img:nth-of-type(1){
top: 400px;
}
img:nth-of-type(2){
top: 2400px;
}
img:nth-of-type(3){
top: 5000px;
}
img:nth-of-type(4){
top: 6400px;
}
img:nth-of-type(5){
top: 7400px;
}
</style>
</head>
<body style="height: 8000px;">
<!--datasrc 是自定义的属性-->
<img datasrc="img/dog.jpg"/>
<img datasrc="img/dog1.jpg"/>
<img datasrc="img/dog2.jpg"/>
<img datasrc="img/dog4.jpg"/>
<img datasrc="img/dog5.jpg"/>
</body>
</html>
<script type="text/javascript">
// 图片延迟加载: 也叫图片懒加载;如果图片没有在可视区域之内,不进行加载图片,什么时候图片进入可视区域才开始加载.
// 这样做得好处,可以节省流量,还可以节省内存.(在某段时间内)
//获取所有的图片标签
var imgsArray = document.querySelectorAll('img');
//这个函数查看哪个图片正在可视区域之内.
function showImg(){
//遍历所有的图片,看看哪个在可视区域
for(var i = 0 ; i < imgsArray.length;i++){
//计算可视区域的高度 + 滑动区域的高度
var sumHeight = document.documentElement.clientHeight + document.documentElement.scrollTop +document.body.scrollTop;
if(imgsArray[i].offsetTop <= sumHeight - 300 && imgsArray[i].src ==''){
//显示这个图片
imgsArray[i].src = imgsArray[i].getAttribute("datasrc");
}
}
}
showImg();
window.onscroll = function(){
showImg();
}
</script>
