实现思路
Element.getBoundingClientRect()
方法返回(DOMRect
对象)元素的大小及其相对于视口的位置。
如果图片元素出现再屏幕上,
即: 视口高度
window.innerHeight
- 元素顶部高度Element.getBoundingClientRect().top
≥ 0),则填充图片的
src
属性代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>图片懒加载</title>
</head>
<body>
<div id="img-group">
<div>
<img data-src="https://avatars.githubusercontent.com/u/33377263?v=4">
</div>
<div>
<img data-src="https://avatars.githubusercontent.com/u/33377263?v=4">
</div>
<div>
<img data-src="https://avatars.githubusercontent.com/u/33377263?v=4">
</div>
<div>
<img data-src="https://avatars.githubusercontent.com/u/33377263?v=4">
</div>
<div>
<img data-src="https://avatars.githubusercontent.com/u/33377263?v=4">
</div>
<div>
<img data-src="https://avatars.githubusercontent.com/u/33377263?v=4">
</div>
<div>
<script>
// 获取可视高度
let innerHeight = window.innerHeight
window.onload = () => {
let imgGroup = document.getElementById('img-group')
let imgDoms = imgGroup.getElementsByTagName('img')
// 设置开始处理 num, 避免重复调用
let num = 0
let loadImg = (imgDoms) => {
for (let i = num; i < imgDoms.length; i++) {
// Element.getBoundingClientRect() 方法返回元素的大小及其相对于视口的位置。
// https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getBoundingClientRect
if (innerHeight - imgDoms[i].getBoundingClientRect().top > 0) {
imgDoms[i].src = imgDoms[i].getAttribute('data-src')
// 下次直接从下一个元素开始判断
num = i + 1
}
}
}
// 先调用一次初始化
loadImg(imgDoms)
window.onscroll = () => {
// 优化项, 使用防抖节流减少被触发次数
loadImg(imgDoms)
}
}
</script>
</body>
</html>