请笑纳
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.images{
display: flex;
flex-direction: column;
text-align: center;
width: 500px;
}
.img-item{
height:400px;
width: 400px;
margin: 20px;
}
</style>
</head>
<body>
<div class="images">
<img class="img-item" alt="loading" data-src="./img/nav3.png">
<img class="img-item" alt="loading" data-src="./img/nav3.png">
<img class="img-item" alt="loading" data-src="./img/nav3.png">
<img class="img-item" alt="loading" data-src="./img/nav3.png">
<img class="img-item" alt="loading" data-src="./img/nav3.png">
<img class="img-item" alt="loading" data-src="./img/nav3.png">
<img class="img-item" alt="loading" data-src="./img/nav3.png">
</div>
</body>
</html>
<script type="text/javascript">
// window.innerHeight：浏览器可视区域高度
// document.body.scrollTop || document.documentElement.scrollTop：浏览器滚动条滚过高度
// img.offsetTop：元素距文档顶部的高度
var imgs = document.getElementsByTagName('img');
var lazyload = function(){
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
var winTop = window.innerHeight;
for(var i=0;i < imgs.length;i++){
if(imgs[i].offsetTop < scrollTop + winTop ){
imgs[i].src = imgs[i].getAttribute('data-src');
}
}
}
function throttle(method,delay){
var timer = null;
return function(){
var context = this, args=arguments;
clearTimeout(timer);
timer=setTimeout(function(){
method.apply(context,args);
},delay);
}
}
window.onscroll = throttle(lazyload,300);
</script>
