9. 图片懒加载
小于 1 分钟
9. 图片懒加载
图片懒加载的优化处理:
- 图片全部加载完成后移除事件监;
- 加载完的图片,从
imgList
移除
图片使用 data-src
而不是 src
保存 URL,当滚动到指定位置时显示图片。
let imgList = [...document.querySelectorAll('img')]
const length = imgList.length
const imgLazyLoad = (() => {
let count = 0
return () => {
const deleteIndexList = []
imgList.forEach((img, index) => {
const rect = img.getBoundingClientRect()
if (rect.top < window.innerHeight) {
img.src = img.dataset.src
deleteIndexList.push(index)
count++
if (count === length)
document.removeEventListener('scroll', imgLazyLoad)
}
})
imgList = imgList.filter((img, index) => !deleteIndexList.includes(index))
}
})()
// 这里最好加上防抖处理
document.addEventListener('scroll', imgLazyLoad)