在 React 中延迟加载图像

在 React 中延迟加载图像

Photo by 迈克·范登博斯 on 不飞溅

什么是延迟加载？

延迟加载不是一次性加载整个网页并将其呈现给用户，而是仅帮助加载所需的部分（通常是用户的视口），直到用户需要它为止。

在 unsplash 上可以看到一个例子。最初，我们看到一个质量非常低的图像，一旦我们向下滚动，它就会完全加载到页面上。这最终会导致减少带宽使用、改善用户体验并加快页面加载。

unsplash lazy loading

在继续之前，让我们看看，为什么我们甚至需要延迟加载图像？

• 节省数据和带宽 — 视口外的图像不会立即下载，因此延迟加载可以节省带宽使用。
• 降低 CDN 的成本 — 媒体服务（如 Cloudinary）提供媒体存储计划，延迟加载图像确保仅从 CDN 请求实际需要的图像，从而降低服务器成本。
• 改善搜索引擎优化 —众所周知，加载速度是影响SEO的重要因素。延迟加载减少了页面加载时间，这反过来又提高了 SEO。

让我们goooo..

我们将使用一个名为 React 延迟加载图像组件 .正如它的名字所暗示的那样，这个库为我们提供了一个延迟加载图像组件，它还为我们提供了一个用于模糊图像的插件，本文将进一步使用。

• Github 链接

最初设定

让我们开始一个新项目。

 npx create-react-app react-lazy-load

现在让我们安装我们的包，通过编写

 npm i react-lazy-load-image-component

只需编写即可启动您的反应服务器

 npm 开始

风格

在继续之前，请更新您的 应用程序.css 使用下面提到的代码。

 /* 应用程序.css */ * {  
 填充：0；  
 边距：0；  
 box-sizing：边框框；  
 } .img {  
 高度：100vh；  
 宽度：100vw；  
 }

您可以在以下位置找到所有图像及其占位符 这个 **** 公共文件夹中的存储库。

延迟加载组件与图像标签

因此，这是在我们的 webapp 中添加图像的基本方法。但这有很多问题，如果你打开你的网络标签，你会看到这样的东西。

Requests on using img

请注意如何一次加载所有 7 张图片，这会减慢我们的网站速度。

如果您有一个图库应用程序或一个社交订阅应用程序或任何其他需要提供大量图像的应用程序，那么一次加载所有图像没有任何意义。

这就是“延迟加载图像反应”来拯救我们的地方。

查看 App.js 的更新实现。

我们使用的是“LazyLoadImage”组件而不是“img”标签，但别担心，它的工作方式与“img”标签完全相同，也就是说，您可以像“img”标签一样设置它的样式。

占位符（可选）： 占位符是在从服务器获取实际图像时呈现在屏幕上的图像。占位符图像通常小于 5KB，而实际图像可能高达 5 甚至 10 MB。在我们的示例中，实际图像约为 4 到 5 MB，占位符约为 1-2 KB。

在现实世界的应用程序中，真正发生的是当用户上传图像时，会创建不同大小和质量的同一图像的多个副本（占位符图像就是其中之一），因此我们可以在需要时使用它们。

现在让我们看一下网络选项卡。

Requests with lazy load component

请注意，如何获取所有占位符，并且最初仅获取 2 个实际图像。如果进一步向下滚动，出现在视口中的图像将简单地从服务器获取并呈现在屏幕上。

如果您想在浏览器中模拟网络连接，请打开您的开发者工具网络选项卡并根据您的需要更改节流阀。

GitHub： https://github.com/AshishPandagre/lazy-loading-images-react

演示： https://github.com/AshishPandagre/lazy-loading-images-react#demo-

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/27132/00371109