使用 React JS 实现图像延迟加载

如今，延迟加载对于提升网站性能至关重要。进行图片优化有助于提升网站速度、优化 SEO 并提升用户体验。
本次你将学习如何使用 React JS 在应用程序中实现图片延迟加载。

欢迎任何形式的反馈，谢谢，希望您喜欢这篇文章。🤗

目录。

📌什么是延迟加载？

📌实现延迟加载的好处

📌需要用到的技术。📌 创建项目。📌

实现延迟加载。

📌第一步。📌 不实现延迟加载即可显示图片。📌

实现延迟加载即可显示图片。

📌结论。

💤 什么是延迟加载？

一般来说，当用户访问网站时，页面的所有内容都会立即下载并显示，即使无法保证用户一定会使用它们。这会导致内存和带宽的损失。

这时就需要使用延迟加载了。延迟加载是一种策略，它会延迟加载某些文件（例如图片），直到用户根据他们在应用程序中的活动和导航需要它们时才加载。通常情况下，这些文件只有在用户可见时才会加载。

💤 实现延迟加载的好处。

在网站定位的内容和最终体验之间取得理想的平衡，实现相关的价值传递。
连接更快、更优化，因为只加载显示的内容。
通过提供高效加载和无延迟来提高用户保留率。
仅使用需要显示的内容来节省资源。
提供差异化的体验，尤其是对于连接速度较慢的用户。
优化用户资源的使用，例如电池、移动数据、时间等。

💤 要使用的技术。

▶️ React JS（v 18）
▶️ Vite JS
▶️ TypeScript
▶️ CSS vanilla（您可以在本文末尾的存储库中找到样式）

💤 创建项目。

我们将为该项目命名：（lazy-img可选，您可以随意命名）。



npm init vite@latest

我们使用 Vite JS 创建项目，并选择 React with TypeScript。

然后运行以下命令导航到刚刚创建的目录。



cd lazy-img

然后我们安装依赖项。



npm install

然后我们在代码编辑器中打开项目（在我的情况下是 VS 代码）。



code .

💤 实现延迟加载。

现在，我们可以用最简单的方式实现延迟加载，只需将值为lazy的加载属性附加到HTML 中的img或frame标签上即可：



<img src="image.jpg" alt="Image Alt" loading="lazy" />

<iframe src="iframe" loading="lazy"></iframe>

但这并不适用于所有浏览器。因此，在这种情况下，我们需要一个外部包。

💤 第一步。

我们将安装：react-lazy-load-image-component。

这个流行的库提供了图像渲染功能和效果，您可以在自己的 React 应用程序中快速轻松地实现。

我们安装该包：



npm i react-lazy-load-image-component

注意：如果您要将它与 TypeScript 一起使用，则必须安装其类型定义文件：

npm i -D @types/react-lazy-load-image-component


Now in our src/App.tsx file we delete everything and add only a new component that renders a title.

```tsx


const App = () => {
  return (
    <div>
      <h1><span>Lazy Loading Images</span> 🖼️</h1>
    </div>
  )
}
export default App

💤 无需实现延迟加载即可显示图像。

首先，我们生成一个返回一定数量元素的函数，以便映射这些元素并根据元素的数量显示图像。



const generateArray = (items: number) => [...Array.from(Array(items).keys())];

现在我们调用函数generateArray来生成15个元素，并使用map方法遍历它并渲染一张普通图像。图片来自这个页面：https://picsum.photos/



const generateArray = (items: number) => [...Array.from(Array(items).keys())];

const App = () => {
  return (
    <div>
      <h1><span>Lazy Loading Images</span> 🖼️</h1>

      <div className="container-images">
        {
          generateArray(15).map(i => (
            <img
              key={i}
              src={`https://picsum.photos/id/${i}/500`}
              alt={`Image Alt-${i}`}
              className="img-lazy"
              width={700} height={500}
            />
          ))
        }
      </div>
    </div>
  )
}
export default App

这样，15幅图像就会向下显示。目前我们在屏幕上只能看到一幅。

我们在检查我们网站的网络时注意到了一些事情。

尽管我们只看到一张图片，但所有图片都正确加载，这就是问题所在，它增加了我们的初始加载速度，因此页面加载速度变慢，用户感到无聊并离开我们的网站！

💤 显示实现延迟加载的图像。

解决方案是实现延迟加载。

为此，我们从之前安装的包中导入组件，然后将img标签更改为LazyLoadImage。



import { LazyLoadImage } from "react-lazy-load-image-component";

const generateArray = (items: number) => [...Array.from(Array(items).keys())];

const App = () => {
  return (
    <div>
      <h1><span>Lazy Loading Images</span> 🖼️</h1>

      <div className="container-images">
        {
          generateArray(15).map(i => (
            <LazyLoadImage
              key={i}
              src={`https://picsum.photos/id/${i}/500`}
              alt={`Image Alt-${i}`}
              className="img-lazy"
              width={700} height={500}
            />
          ))
        }
      </div>
    </div>
  )
}
export default App

此组件还允许我们在图像加载时显示占位符。只需添加placeholderSrc属性即可。

此外，它还具有一个属性，可以在图像加载前初始添加某个动画，并在图像完全加载后移除该动画，因为它添加了effect属性。但要使用它，您需要导入该效果的 CSS。



import { LazyLoadImage } from "react-lazy-load-image-component";

import 'react-lazy-load-image-component/src/effects/blur.css';

const generateArray = (items: number) => [...Array.from(Array(items).keys())];

const App = () => {
  return (
    <div>
      <h1><span>Lazy Loading Images</span> 🖼️</h1>

      <div className="container-images">
        {
          generateArray(15).map(i => (
            <LazyLoadImage
              key={i}
              src={`https://picsum.photos/id/${i}/500`}
              alt={`Image Alt-${i}`}
              className="img-lazy"
              width={700} height={500}
              placeholderSrc={placeholder}
              effect='blur' // opacity | black-and-white
            />
          ))
        }
      </div>
    </div>
  )
}
export default App

我们的网站已经准备好了。

如果我们现在查看网络选项卡中的开发工具，我们会发现应用程序的加载时间减少了近一半，这是因为只加载了视图中的图像，而当用户滚动浏览网站时，其他图像也会加载。

💤结论。

优化图像是一种很好的做法，必须在您的网站中实施，以便为用户创造更好的体验，同时也考虑移动设备。

我希望你喜欢这篇文章，并希望它能帮助你理解和实践这种延迟加载技术，你会注意到你的应用程序性能发生了令人难以置信的变化。🤗

如果您知道任何其他不同或更好的执行延迟加载的方法，请随时在评论中留下它🙌。

如果您有兴趣就某个项目与我联系，欢迎查看我的投资组合！富兰克林·马丁内斯·卢卡斯

🔵 别忘了在推特上关注我：@Frankomtz361

文章来源：https://dev.to/franklin030601/lazy-loading-in-images-with-react-js-4enm