优化 Next.js 图片懒加载：Intersection API 的强大助力

2023-09-15 09:17:30

优化Next.js图片懒加载：Intersection API 的妙用

在最近的一个项目中，我们惊讶地发现，即使图片没有进入视口，也会提前加载。经过一番调查，我们发现罪魁祸首是 Next.js 中 Image 组件的 lazyBoundary 默认值。此值会预先加载进入视口前一定范围内内的图片，导致不必要的资源浪费和页面性能下降。

理解 Intersection API

解决此问题的关键在于了解 Intersection API，这是一个浏览器 API，可让我们监视元素相对于视口的可见性。通过使用 Intersection API，我们可以仅在元素可见时才加载图片，从而优化性能和用户体验。

配置 Next.js 中的 Image 组件

Next.js 提供了 Image 组件，使我们能够轻松管理图片加载。要利用 Intersection API，我们可以使用 onLoadingComplete 和 unloader 属性。

实施示例

让我们看一个实施示例：

import { Image } from 'next/image'

const MyImage = ({ src, alt }) => {
  const [loading, setLoading] = useState(false)

  const handleLoadingComplete = (e) => {
    e.target.classList.remove('lazy')
    setLoading(false)
  }

  const unloader = (e) => {
    e.target.classList.add('lazy')
    setLoading(true)
  }

  return (
    <Image
      src={src}
      alt={alt}
      width={1000}
      height={1000}
      onLoadingComplete={handleLoadingComplete}
      unloader={unloader}
      className="lazy"
    />
  )
}