两种设置图片懒加载的方法

如下DOM结构

<p>这是一堆文字</p>
<p>这是一堆文字</p>
<p>这是一堆文字</p>
<p>这是一堆文字</p>
<p>这是一堆文字</p>
<p>这是一堆文字</p>
<p>这是一堆文字</p>
<p>这是一堆文字</p>
<p>这是一堆文字</p>
<p>这是一堆文字</p>
<p>这是一堆文字</p>
<p>这是一堆文字</p>
<p>这是一堆文字</p>
<p>这是一堆文字</p>
<p>这是一堆文字</p>
<p>这是一堆文字</p>
<p>这是一堆文字</p>
<p>这是一堆文字</p>
<p>这是一堆文字</p>
<p>这是一堆文字</p>
<p>这是一堆文字</p>
<p>这是一堆文字</p>
<p>这是一堆文字</p>
<p>这是一堆文字</p>
<img data-src="1.jpg">
<img data-src="2.jpg">
<img data-src="3.jpg">

让图片滚动到可视区域的时候进行加载

 

方法一： 通过获取图片的到顶部的top值与窗口高度进行比较来动态加载元素

const images = document.querySelectorAll('img')

window.addEventListener('scroll', (e) => {
    images.forEach(image => {

           const imageTop = image.getBoundingClientRect().top;
           if(imageTop < window.innerHeight) {
                const data_src = image.getAttribute('data-src')
               image.setAttibute('src', data_src)
       }
  })
})

// 可以使用节流来进行优化

 

 

方法一缺点就是会不断触发事件，非常消耗资源

方法二: 通过API ： IntersectionObserver来判断图片是否滚动到了可视区域

const imgs = document.querySelectorAll('img')
const callback = entries => {
    entries.forEach(entry => {
        const img = entry.target;
        const data_src = img.getAttribute('data-src')
        img.setAttribute('src', data_src)
        observer.unobserver(img) // 观测到出现之后取消监听  
         
   })
}

const observer = new IntersectionObserver(callback)

imgs.forEach(img => {
    observer.observe(img)
 })

 

IntersectionObserver