版权所有，禁止匿名转载；禁止商业使用。
图片迟加载即当滚动条向下滚动时，只有在视口内的图片才加载，其他图片则不加载。
可以先把图片的url地址，保存在img的一个自定义属性中，然后给图片起个类名lazy，
当滚动条滚动时，把类名为lazy的图片push到一个数组中，然后循环遍历该数组，并判断图片是否在视口内，若在则将该图片的src设为自定义属性的值，并将类名设为nolazy。
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title></title>
<style>
body, ul, li, img{
margin: 0;
padding: 0;
}
#imgs{
overflow: hidden;
}
#imgs>li{
float: left;
list-style-type: none;
width: 30%;
margin-left: 5%;
height: 200px;
margin-top: 10px;
background-color: green;
text-align: center;
line-height: 200px;
}
#imgs li:nth-child(3n+1){
margin-left: 0;
}
#imgs li img{
width: 100px;
height: 100px;
vertical-align: middle;
}
</style>
</head>
<body>
<script>
window.onload = function(){
var imgArray = document.getElementsByTagName(‘img’);
var lazyArray = []; //存放未加载的图片
var viewHeight = window.screen.height;
var temp = -1; //保存滚动条上次离顶部的距离
var scrollT = 0; //保存滚动条离顶部的距离
function setImg(){
//将未加载的图片push到数组lazyArray
for(var i=0; i<imgArray.length; i++){
if(imgArray[i].getAttribute(‘class’) == “lazy”){
lazyArray.push(imgArray[i]);
}
}
//判断未加载的图片是否在视窗内
for(var i=0; i<lazyArray.length; i++){
//图片离窗口顶部的高度
var imgT = lazyArray[i].offsetTop;
//图片在视口内
if(imgT – scrollT < viewHeight){
lazyArray[i].className = ‘notlazy';
lazyArray[i].setAttribute(‘src’, lazyArray[i].getAttribute(‘data-src’));
}
}
}
setImg();
window.onscroll = function(){
//兼容性处理
scrollT = document.body.scrollTop || document.documentElement.scrollTop;
//判断滚动条的滚动方向 向下才处理
if(temp < scrollT){
setImg();
}
temp = scrollT;
}
}
</script>
<ul id=”imgs”>
<li><img data-src=”img/503.png” src=”img/503.png” alt=””/></li>
<li><img data-src=”img/503.png” src=”” alt=””/></li>
<li><img data-src=”img/503.png” src=”” alt=””/></li>
<li><img data-src=”img/503.png” src=”” alt=””/></li>
<li><img data-src=”img/503.png” src=”” alt=””/></li>
<li><img data-src=”img/503.png” src=”” alt=””/></li>
<li><img data-src=”img/503.png” src=”” alt=””/></li>
<li><img data-src=”img/503.png” src=”” alt=””/></li>
<li><img data-src=”img/503.png” src=”” alt=””/></li>
<li><img data-src=”img/503.png” src=”” alt=””/></li>
<li><img data-src=”img/503.png” src=”” alt=””/></li>
<li><img data-src=”img/503.png” src=”” alt=””/></li>
<li><img data-src=”img/503.png” src=”” alt=””/></li>
<li><img data-src=”img/503.png” src=”” alt=””/></li>
<li><img data-src=”img/503.png” src=”” alt=””/></li>
<li><img data-src=”img/503.png” src=”” alt=””/></li>
<li><img data-src=”img/503.png” src=”” alt=””/></li>
<li><img data-src=”img/503.png” src=”” alt=””/></li>
<li><img data-src=”img/503.png” src=”” alt=””/></li>
<li><img data-src=”img/503.png” src=”” alt=””/></li>
<li><img data-src=”img/503.png” src=”” alt=””/></li>
<li><img data-src=”img/503.png” src=”” alt=””/></li>
<li><img data-src=”img/503.png” src=”” alt=””/></li>
<li><img data-src=”img/503.png” src=”” alt=””/></li>
<li><img data-src=”img/503.png” src=”” alt=””/></li>
<li><img data-src=”img/503.png” src=”” alt=””/></li>
<li><img data-src=”img/503.png” src=”” alt=””/></li>
<li><img data-src=”img/503.png” src=”” alt=””/></li>
<li><img data-src=”img/503.png” src=”” alt=””/></li>
<li><img data-src=”img/503.png” src=”” alt=””/></li>
<li><img data-src=”img/503.png” src=”” alt=””/></li>
<li><img data-src=”img/503.png” src=”” alt=””/></li>
<li><img data-src=”img/503.png” src=”” alt=””/></li>
<li><img data-src=”img/503.png” src=”” alt=””/></li>
<li><img data-src=”img/503.png” src=”” alt=””/></li>
<li><img data-src=”img/503.png” src=”” alt=””/></li>
<li><img data-src=”img/503.png” src=”” alt=””/></li>
<li><img data-src=”img/503.png” src=”” alt=””/></li>
<li><img data-src=”img/503.png” src=”” alt=””/></li>
<li><img data-src=”img/503.png” src=”” alt=””/></li>
<li><img data-src=”img/503.png” src=”” alt=””/></li>
<li><img data-src=”img/503.png” src=”” alt=””/></li>
<li><img data-src=”img/503.png” src=”” alt=””/></li>
<li><img data-src=”img/503.png” src=”” alt=””/></li>
<li><img data-src=”img/503.png” src=”” alt=””/></li>
<li><img data-src=”img/503.png” src=”” alt=””/></li>
<li><img data-src=”img/503.png” src=”” alt=””/></li>
<li><img data-src=”img/503.png” src=”” alt=””/></li>
<li><img data-src=”img/503.png” src=”” alt=””/></li>
</ul>
</body>
</html>