const imgs = document.querySelectorAll('img')
const callback = enteries => {//enteries:数组,里面放置了每一张图片的对象
enteries.forEach(entry => {
if (entry.isIntersecting) {//利用每一张图片对象的isIntersecting属性判断是否交叉(图片是否出现在视口)
const image = entry.target //获取图片
const data_src = image.getAttribute('data-src')//将图片自定义属性取出
image.setAttribute('src', data_src)
observer.unobserve(image)//已经展示的图片可以取消观察
}
})
}
const observer = new IntersectionObserver(callback)//创建观察实例对象,并调用回调函数callback
imgs.forEach(image => {
observer.observe(image)//利用observer实例调用observe方法观察每一张图片
})