IntersectionObserver实现图片懒加载

思ۣۖิิۣۖิ❧❦空❧❦

已于 2022-05-11 22:29:22 修改

阅读量212

点赞数

文章标签： javascript html 前端性能优化

于 2022-04-08 20:51:22 首次发布

本文链接：https://blog.csdn.net/qq_45228255/article/details/124050115

版权

IntersectionObserver

它可以用来自动监听元素是否进入了设备的可视区域之内，而不需要频繁的计算来做这个判断，被

称为"交叉观察器"

实现步骤

1、先把图片放置可视区域外

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>4</li>
    <li>4</li>
    ......
    <li>5
      <img id='app' alt="">
    </li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
  </ul>

2、获取DOM

var img = document.getElementById('app')

3、实例化 IntersectionObserver

// 参数是一个回调函数 (arr) =>{ }
var observer = new IntersectionObserver(参数)

IntersectionObserver的回调函数里的arr是一个数组，数据如下：

主要是用到intersectionRatio和isIntersectionRatio，常在 if 语句做判断

intersectionRatio： 是否进入可视区（和 rootMargin 有关联）返回值是一个布尔值

isIntersectionRatio：返回目标元素出现在可视区的比例

4、调用函数，开始监听

 observer.observe(img)

所有代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>图片懒加载</title>
</head>

<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>4</li>
    ......(多来点 li )
    <li>5
      <img id='app' alt="">
    </li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
  </ul>

  <script>
    // 获取DOM
    var img = document.getElementById('app')
    // 实例化 IntersectionObserver
    var observer = new IntersectionObserver(arr => {
      // 是否进入 返回值是一个布尔值
      console.log(arr[0].isIntersecting)
      // 返回目标元素出现在可视区的比例
      console.log(arr[0].isIntersectionRatio)
      // 图片进入可视区域内(注意 rootMargin 的值)
      if (arr[0].isIntersecting) {
        img.src = '要展示的图片'
        // 图片加载错误的回调(优化用户体验)
        img.onorrer = function () {
          console.log('图片加载失败')
          img.src = '默认图片地址'
        }
        // 图片加载后的回调
        img.onload = function () {
          console.log('图片加载完毕');
        }
        // 不再监听  只监听一次
        observer.unobserve(img)
      }
      // rootMargin 提前 100px 来发请求获取图片，因为发请求也是需要时间的
    }, { rootMargin: '100px' })
    // 调用函数，开始监听
    observer.observe(img)
  </script>
</body>

</html>