<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>
*{
padding: 0;
margin: 0;
}
body{
overflow-y: hidden;
}
#img_list{
height: 100vh;
overflow-y: scroll;
}
img {
display: block;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<ul id="img_list">
<li>
<img data-src="./img/0.png" alt="">
</li>
<li>
<img data-src="./img/1.png" alt="">
</li>
<li>
<img data-src="./img/2.png" alt="">
</li>
<li>
<img data-src="./img/3.png" alt="">
</li>
<li>
<img data-src="./img/4.png" alt="">
</li>
<li>
<img data-src="./img/5.png" alt="">
</li>
<li>
<img data-src="./img/0.png" alt="">
</li>
<li>
<img data-src="./img/1.png" alt="">
</li>
<li>
<img data-src="./img/0.png" alt="">
</li>
<li>
<img data-src="./img/1.png" alt="">
</li>
<li>
<img data-src="./img/2.png" alt="">
</li>
<li>
<img data-src="./img/3.png" alt="">
</li>
<li>
<img data-src="./img/4.png" alt="">
</li>
<li>
<img data-src="./img/5.png" alt="">
</li>
<li>
<img data-src="./img/0.png" alt="">
</li>
<li>
<img data-src="./img/1.png" alt="">
</li>
</ul>
<script>
let oImg = document.getElementById('img_list')
let oimgList = oImg.getElementsByTagName('img')
let debounceLoad = debounce(loadImg,100)
// 首次加载出现在页面的图片
Array.from(oimgList).forEach(el => {
if(el.offsetTop < document.body.clientHeight) {
el.setAttribute("src",el.getAttribute('data-src'))
}
});
oImg.addEventListener('scroll',(e) => {
let scrollTop = e.target.scrollTop
debounceLoad(scrollTop)
})
function loadImg(scrollTop) {
Array.from(oimgList).forEach(el => {
if(el.offsetTop < document.body.clientHeight + scrollTop) {
// 避免已有图片的img 标签 重复添加 src 属性
if(!el.getAttribute('src')) {
el.setAttribute("src",el.getAttribute('data-src'))
}
}
});
}
// 防抖函数，避免滚动时一直触发
function debounce (fun,time) {
let timer
return function (...arg) {
if(timer) {
clearTimeout(timer)
}
timer = setTimeout(() => {
console.log(this)
fun(...arg)
},time)
}
}
</script>
</body>
</html>```
浙公网安备 33010602011771号