图片懒加载的两种方法下面介绍两种实现图片懒加载的几种方式：基于 window.scroll 事件的懒加载其中wind

下面介绍两种实现图片懒加载的几种方式：

基于 window.scroll 事件的懒加载

  <!-- HTML -->
  
  // 这个p标签里的'文本区域'目的只是让图片未处在视图可视区域
    <p>
    文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域
    </p>
      <img data-src="https://ts1.cn.mm.bing.net/th/id/R-C.748160bf925a7acb3ba1c9514bbc60db?rik=AYY%2bJ9WcXYIMgw&riu=http%3a%2f%2fseopic.699pic.com%2fphoto%2f50017%2f0822.jpg_wh1200.jpg&ehk=CMVcdZMU6xxsjVjafO70cFcmJvD62suFC1ytk8UuAUk%3d&risl=&pid=ImgRaw&r=0" alt="" class="p1">
      <img data-src="https://sc.68design.net/photofiles/202104/y0ZaKVXVx2.jpg" alt="" class="p1">
      <img data-src="https://img.zcool.cn/community/01a3a2599c3deba80121ad7b597cab.jpg@1280w_1l_2o_100sh.jpg" alt="" class="p1">
  
  
   <!-- JS -->
   // 获取所有的img标签
    const images = document.querySelectorAll('img')
    window.addEventListener('scroll',(e)=>{
        images.forEach(item => {
          // item 每一张图片
          const imgTop = item.getBoundingClientRect().top
          // 说明已经在视图范围内了
          if(imgTop < window.innerHeight){
            // 定义自定义属性 目的是 方便图片到了可视区域后才开始加载
            const data_src = item.getAttribute('data-src')
            console.log(data_src);
            item.setAttribute('src',data_src)
          }
        })
    })

其中window.innerHeight为窗口显示区的高度，getBoundingClientRect().top为图片到视窗上边的高度。

基于 Intersection Observer API 的懒加载

  <!-- HTML -->
  
  // 这个p标签里的'文本区域'目的只是让图片未处在视图可视区域
    <p>
    文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域文本区域
    </p>
    
    
  <!-- JS -->
   const images = document.querySelectorAll('img')

    // 这个回调函数里面接收参数 其中里面的一个参数(isIntersecting) 将作为判断条件
    const callback = (entries)=>{
      entries.forEach(entry => {
        if(entry.isIntersecting){
        const image = entry.target // 看是谁触发的 target属性指的就是目标元素
        const data_src = image.getAttribute('data-src')
        image.setAttribute('src',data_src)
        observer.unobserve(image)
        }
      })
    }

// 这个callback一般触发两次 目标元素可以看见触发一次  看不见了又触发一次
const observer = new IntersectionObserver(callback)

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

需要注意的就是浏览器是否支持可以通过下面的代码来检测。

if ('IntersectionObserver' in window) {
  // 浏览器支持 Intersection Observer API
  // 在这里可以编写相关代码
} else {
  // 浏览器不支持 Intersection Observer API
  // 可以提供一些备用方案或提示用户升级浏览器
}