让它加载

慢加载是优化网页性能的一种方法，可以显着改善用户体验。图片一直是影响网页性能的罪魁祸首，现在图片超过几兆字节已经很常见了。如果每次进入页面时都请求所有图片资源，用户可能会在图片加载完毕后很久就离开。所以进入页面时，只请求可见区域的图片资源。

总结：

• 减少资源负载。页面启动时，仅加载第一个屏幕的图像。这样可以显着减轻服务器的压力和流量，同时也减轻浏览器的负载。
• 防止同时加载的资源太多，阻塞js加载，影响整个网站的启动和用户体验
• 浪费用户流量，有些用户不想全部读完，全部加载起来消耗大量流量。

主要思想

图片延迟加载的原理是暂时不设置图片的src属性，而是隐藏图片的URL。例如，先写入data-src，当前图片到达可见区域后，再输入图片的实际URL。要了解如何延迟加载图像，请输入 src 属性。

  function lazyload(){
    let imgs = document.querySelectorAll('img[data-src]')
    imgs.forEach((item,index) => {
        let clientHeight = document.documentElement.clientHeight
        let scrollTop = document.documentElement.scrollTop
        if(item.dataset.src === '') return
        if( item.offsetTop - scrollTop < clientHeight){
            item.src = item.dataset.src
            item.removeAttribute('data-src')
        }
    })
}
window.addEventListener('scroll', lazyload)

 

如果我们想实现延迟加载，我们需要通过实现上面的例子来监听滚动事件。虽然我们可以通过限制函数来防止函数的高频执行，但是我们仍然需要计算scrollTop、offsetHeight等属性。有没有一种简单的方法可以避免计算这些属性？答案是肯定的 - IntersectionObserver

const imgs = document.querySelectorAll('img[data-src]')
const config = {
  rootMargin: '0px',
  threshold: 0,
}
let observer = new IntersectionObserver((entries, self) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      let img = entry.target
      let src = img.dataset.src
      if (src) {
        img.src = src
        img.removeAttribute('data-src')
      }
      // 解除观察
      self.unobserve(entry.target)
    }
  })
}, config)

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