js 实现 图片懒加载
html
<img src="loading图" data-src="./img/1.jpg" alt="">
<img src="loading图" data-src="./img/2.jpg" alt="">
<img src="loainding图" data-src="./img/3.jpg" alt="">
<img src="loading图" data-src="./img/4.jpg" alt="">
<img src="loading图" data-src="./img/5.jpg" alt="">
<img src="loading图" data-src="./img/1.jpg" alt="">
js
const images = document.querySelectorAll('img')
const observer = new IntersectionObserver(nodes => {
nodes.forEach(v => {
if (v.isIntersecting) {
// 为显示效果 可在此处添加定时器
v.target.src = v.target.dataset.src
observer.unobserve(v.target)
}
})
})
images.forEach(v => observer.observe(v))