[JavaScript知识库]图片懒加载方案

一、概述

• 图片懒加载其实就是延迟加载，我们知道浏览器的可视范围是有限的，现在网页的内容越来越丰富了，一般网页的内容都是需要进行滚动才能完成浏览，如果网页有很多图片，然而图片是非常吃流量的，如果用户还没有看到网页下面的内容，在某种程度上我们就没必要这么快加载这些看不到的图片。

二、监听scroll事件方案

• 既然要滚动到网页下面才能预览到看不见的图片，因此一个要介绍的方法就是事件监听，监听scroll这个事件，鼠标滚动就触发，那么这里我们需要知道两个高度:
• 第一个高度是窗口显示区的高度，可以用window.innerHeight来获取。
• 第二个高度是图片到视窗上边的距离高度，可以用元素的getBoundingClientRect().top()来获取。
• 如果图片还未能看见，也就是说图片距离视窗顶部的距离大于窗口显示区的高度。
• 如果图片可以看见，也就是说图片距离视窗顶部的距离小于窗口显示区的高度。
• 这就是比较简易的一种实现方式。

<div>
  <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="test1.png" alt="">
  <img data-src="test2.png" alt="">
  <img data-src="test3.png" alt="">
  <p>这是一个P标签</p>
  <p>这是一个P标签</p>
  <p>这是一个P标签</p>
</div>

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.setAttribute('src', data_src);
   }
   console.log('scroll触发')
 })
})

• 图片懒加载是实现了，但是可以看到滚动事件被触发了相当多次，如果执行一些简单的动作还好，但是页面需要加载很多内容就会导致任务的堆积，而且即使图片已经加载了还是会不断触发事件，非常的消耗资源，因此需要使用节流来控制。
• 但是下面介绍一个更好的方法-IntersectionObserver

三、IntersectionObserver方案

• IntersectionObserver是浏览器提供的构造函数，也就是我们可以直接拿来使用，当然前提是要浏览器能够支持。
• 浏览器支持情况如下，基本除了IE浏览器都支持的。

• IntersectionObserver的字面意思就是交叉观察，也就是目标元素和可视窗口会产生交叉区域，观察交叉区域发生了什么事情，然后我们需要执行什么程序。

const images = document.querySelectorAll('img');
const observer = new IntersectionObserver(callback)

const callback = (entries) => {
  entries.forEach(entry=>{
    // 当图片元素进入窗口显示区entry.isIntersecting为true，否则为false
    if (entry.isIntersecting) {
      // 获取到进入窗口显示区的元素
      const image = entry.target;
      const data_src = image.getAttribute('data-src');
      image.setAttribute('src', data_src);

      // 图片加载后，就直接取消observer实例这个观察动作
      observer.unobserve(image)

      console.log('触发')
    }
  })
}

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

• 使用这种方案后发现只触发了3次，因为只有三张图片。