思路:设置自定义属性绑定到
img
上src
上绑定load图 当图片处于视口区域时 将自定义属性的 url 替换图片的 url 即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
flex-direction: column;
align-items: center;
}
img {
display: block;
margin-top: 20px;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="container" id="container">
<div class="imgbox" id="imageBox">
<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2073083920,3302495016&fm=26&gp=0.jpg"
data-src="https://pic2.zhimg.com/50/v2-2038cd0997d58ff893d433761b90c102_hd.webp" alt="">
</div>
</div>
<script>
let num = 10;
function LoadData() { // 模拟获取数据
new Array(num).fill(null).forEach(v => {
container.innerHTML += `<div class="imgbox" id="imageBox">
<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2073083920,3302495016&fm=26&gp=0.jpg"
data-src="https://pic2.zhimg.com/50/v2-2038cd0997d58ff893d433761b90c102_hd.webp" alt="">
</div>`
})
}
function imageLazy() {
// 获取到窗口的高度和窗口被上滑卷曲的长度
let $B = window.outerHeight + window.pageYOffset
Array.from(imageBox).forEach(node => {
// 获取到目标节点的距离顶点的距离 和元素的高度
let $A = node.offsetTop + node.clientHeight
// 获取图片节点
let imgDom = node.getElementsByTagName('img')[0]
// 获取到图片节点是否加载的信息
let imgDomLoad = imgDom.getAttribute('load')
// 目标节点的距离顶点的距离加上元素的高度 大于 窗口的高度和窗口被上滑卷曲的长度 并且图片未加载
if ($A <= $B && !imgDomLoad) {
// 获取到图片的自定义属性的url 添加到图片src中
imgDom.src = imgDom.getAttribute('data-src')
// 设置添加属性 标识已经加载过
imgDom.setAttribute('load', 'true')
}
})
}
window.onload = function () { //页面加载完成执行函数
LoadData()
imageLazy()
}
window.addEventListener('scroll', function () { // 页面滚动是监听
let containerH = container.clientHeight
let $B = window.outerHeight + window.pageYOffset
if ($B >= containerH) { // 页面触底加载数据
LoadData()
}
imageLazy()
})
</script>
</body>
</html>
以上就是图片懒加载的代码,可直接复制学习