代码如下:
<!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>
img{
width: 500px;
height: 500px;
display: block;
margin-top: 20px;
}
</style>
</head>
<body>
<img src="./load.gif" alt="" data-src="./1.png">
<img src="./load.gif" alt="" data-src="./2.png">
<img src="./load.gif" alt="" data-src="./3.png">
<img src="./load.gif" alt="" data-src="./4.png">
<img src="./load.gif" alt="" data-src="./5.png">
<img src="./load.gif" alt="" data-src="./6.png">
<script>
// 获取img标签个数
let num=document.getElementsByTagName("img").length
// 获取img标签位置
let img=document.getElementsByTagName("img")
let n=0//防止重复加载
lazyload()
window.onscroll=lazyload//健康滑动触发lazyload
function lazyload(){
// 获取页面高度
let seeHeight=document.documentElement.clientHeight
// 获取滑轮距离顶部高度
let scrollTop=document.documentElement.scrollTop
// console.log(seeHeight,scrollTop);
// for循环遍历img置换
for (let i=n;i<num;i++){
// offsetTop为图像距离顶部高度
if(img[i].offsetTop<seeHeight+scrollTop){
img[i].src=img[i].getAttribute("data-src")//置换src数据
n=i+1
}
}
}
</script>
</body>
</html>
注意! ! ! !........load.gif,1.png,2.png.......等图需要自己替换才能使用
运行结果初始图:
选定低速3G看着更明显
下滑可以看到如下图:
开始加载第三个图
加载完毕后如下图所示:
成功运行,结束!