20行代码,封装一个 React 图片懒加载组件

开发 前端
图片懒加载是我们在做性能优化时非常重要的手段。我们常常需要图片在进入页面可视区域时,才让加载图片的行为发生。

一、如何判断图片进入视口

我们可以使用传统的方式,监听页面的 scroll 事件,然后调用目标函数的 getBoundingClientRect 方法,得到目标元素在网页中的位置信息。

但是我并不喜欢监听 scroll 事件。因为他会大量的执行,并且 getBoundingClientRect 是一个同步方法,都在主线程上运行,当其频繁执行时可能会导致性能出现问题。

我们可以使用另外一种方式来做到同样的效果。他就是 IntersectionObserver。

var observer = new IntersectionObserver(callback[, option])

IntersectionObserver 提供了一种异步观察目标元素与其祖先元素或者顶级文档 viewport 交叉状态的方法。其祖先元素或者视口,被称为根 root。当目标元素与根元素在视图上产生交集时,回调函数就会执行。

我们也可以在 options 中,自定义配置 root 元素。

let options = {
  root: document.querySelector("#scrollArea"),
  rootMargin: "0px",
  threshold: 1.0,
};

let observer = new IntersectionObserver(callback, options);

options 接受三个参数。

root

自定义目标元素的根节点。该节点必须是目标元素的祖先元素。如果未指定,默认为视口。

rootMargin

根元素周围的边距。其值可以类似于 CSS 的 margin 属性,例如 10px 20px 30px 40px,以此表示上、右、下、左。这些值夜可以是百分比。在计算交叉点之前,这组值用于增大或者缩小根元素边框的每一侧,默认为 0。

threshold

一个数字或者一组数字。表示目标可见度达到多少百分比时,回调函数就应该执行。例如,如果我希望交叉部分每超过目标元素 25% 就执行,那么我就传入 [0, 0.25, 0.5, 0.75, 1]. 默认值为 0。

创建的实例有 4 个方法可以让我们使用。

  • observer.disconnect() 停止监听。
  • observer.observe(element) 开始监听目标元素。
  • observer.takRecords() 返回所有目标元素的信息对象数组。
  • observer.unobserve(element)停止监听目标元素。

回调函数执行时,接收一个参数,该参数为回调函数提供目标对象的位置信息,一共有六个属性。

{
  // 回调执行的时间
  time: 3893.92,
  
  // 被观察的目标对象
  target: element
  
  // 根元素位置信息
  rootBounds: ClientRect {
    bottom: 920,
    height: 1024,
    left: 0,
    right: 1024,
    top: 0,
    width: 920
  },
  
  // 目标元素位置信息
  boundingClientRect: ClientRect {
     // ...
  },
  
  // 交叉区域矩形的位置大小信息
  intersectionRect: ClientRect {
    // ...
  },
  
  // 元素可见度比例
  intersectionRatio: 0.54,
}

该参数返回一个数组包含一个或者多个元素的位置信息。

二、图片懒加载原理

在浏览器中,展示一张图片,我们使用的是 img 标签。img 标签有一个必须传入的属性 src,当我们不传入 src 时,图片无法加载,一旦传入 src,那么图片就会立即开始加载。

因此,我们需要做的事情就是,当图片没有出现在可视区域时,不传入正确的 src 属性,当通过上述的方法判断图片已经出现在可视区域,我们就传入正确的 src,此时图片会立即加载。

三、代码实现

首先,我们封装的新组件,一定要继承原有 img 标签的所有能力。先定义一个 Props 类型声明,目前我们并不需要扩展其他的属性,暂时先这样,未来会根据需求的变动逐渐新增新的属性值。

interface LazyLoadProps extends DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement> {
  
}

然后我们我要的事情是,除了 src 属性,我们要把其他属性全部直接传给 img 标签,具体方式如下:

export default function LazyLoad(props: LazyLoadProps) {
  const {src = '', ...other} = props
  
  return (
    <img {...other} />
  )
}

然后我们需要定义一个 ref 属性,用于获取 img 标签的元素对象。

export default function LazyLoad(props: LazyLoadProps) {
  const {src = '', ...other} = props
  const img = useRef(null)

  return (
    <img ref={img} {...other} />
  )
}

准备工作做好之后,我们最后只需要借助 useEffect 声明 IntersectionObserver 实例然后监听图片元素即可。

export default function LazyLoad(props: LazyLoadProps) {
  const {src = '', ...other} = props
  const [URL, setURL] = useState('')
  const img = useRef(null)

  useEffect(() => {
    var io = new IntersectionObserver((entries) => {
      // @ts-ignore
      if (entries[0].intersectionRatio > 0) {
        setURL(src)
        img.current && io.unobserve(img.current)
      }
    }, {})   

    if (img.current) {
      io.observe(img.current)
    }
  }, [])
  return (
    <img ref={img} src={URL} {...other} />
  )
}

这样,一个满足基本要求的图片懒加载组件就封装好了。

四、扩展思考

在我们做首屏优化的时候,为了能够达到最快的速度渲染页面,图片的加载往往也需要延后,但是又不能延后太多。因此此时的问题是,图片已经出现在可视区域了,我们又应该如何做才能做到懒加载呢?

在实践中可能还会遇到的需求变动是,给图片添加一个占位符。然后占位符元素与图片元素的切换不是立即发生的,而是要等到我们确保图片已经全部加载完成之后才发生的,否则的话,可能会出现图片只加载了一小半的视图情况。这又应该如何实现

继续优化。我们希望占位符元素与图片元素的切换没那么生硬,而是结合动画渐入渐出,又该如何实现。

继续优化,我们希望支持传入 aspectFill 等属性,确保图片的缩放比例,不能因为宽高的设置导致图片比例变形,又该如何实现

这些思考就留给大家在实践中去尝试验证了。本文就不在详细介绍。

责任编辑:姜华 来源: 这波能反杀
相关推荐

2017-03-28 10:11:12

Webpack 2React加载

2017-03-28 21:03:35

代码React.js

2020-11-18 09:30:29

图片懒加载前端浏览器

2019-07-24 16:00:37

Python代码高清图片

2015-10-08 10:58:51

图片懒加载

2024-11-08 17:22:22

2024-06-03 00:00:01

2014-01-22 09:19:57

JavaScript引擎

2021-06-21 15:49:39

React动效组件

2017-07-19 13:27:44

前端Javascript模板引擎

2019-04-19 14:40:15

代码Python机器人

2021-03-31 08:01:24

React Portareactcss3

2021-03-19 06:31:06

vue-lazyloa图片懒加载项目

2018-07-12 09:51:04

Python代码对象模型

2022-05-13 08:46:46

jsoneditorjson编辑器

2023-04-10 08:30:30

json编辑器typescript

2023-04-28 09:30:40

vuereact

2023-09-05 20:17:18

typescriptPropTypesreact

2021-03-03 08:32:09

开源子节点组件

2022-01-26 16:30:47

代码虚拟机Linux
点赞
收藏

51CTO技术栈公众号