<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
display: flex;
}
.imgList {
margin: auto;
width: 200px;
display: flex;
flex-wrap: wrap;
}
img {
margin-top: 100px;
padding: 10px;
background: #000;
}
</style>
</head>
<body>
<div class="imgList">
<img src="img/loading.gif" data-src="img/scenery (1).jpg" alt="">
<img src="img/loading.gif" data-src="img/scenery (2).jpg" alt="">
<img src="img/loading.gif" data-src="img/scenery (3).jpg" alt="">
<img src="img/loading.gif" data-src="img/scenery (4).jpg" alt="">
<img src="img/loading.gif" data-src="img/scenery (5).jpg" alt="">
<img src="img/loading.gif" data-src="img/scenery (6).jpg" alt="">
<img src="img/loading.gif" data-src="img/scenery (7).jpg" alt="">
<img src="img/loading.gif" data-src="img/scenery (1).jpg" alt="">
<img src="img/loading.gif" data-src="img/scenery (2).jpg" alt="">
<img src="img/loading.gif" data-src="img/scenery (3).jpg" alt="">
<img src="img/loading.gif" data-src="img/scenery (4).jpg" alt="">
<img src="img/loading.gif" data-src="img/scenery (5).jpg" alt="">
<img src="img/loading.gif" data-src="img/scenery (6).jpg" alt="">
<img src="img/loading.gif" data-src="img/scenery (7).jpg" alt="">
</div>
</body>
<script>
let imgs = [...document.querySelectorAll('img')]; // 先获取所有的图片
window.addEventListener('scroll', function () {
lazyLoad(imgs)
})
function lazyLoad(imgs) {
for (var i = 0; i < imgs.length; i++) {
var height = imgs[i].offsetTop; // 图片的距顶部的高度
var wheight = window.innerHeight; // 浏览器可视区的高度
var sheight = document.documentElement.scrollTop; // 页面被卷去的高度
if (height - sheight <= wheight) { // 判断图片是否将要出现
imgs[i].src = imgs[i].dataset.src; // 出现后将自定义地址转为真实地址 dataset.xxx获取data-xxx的值
}
}
}
</script>
</html>
