图片延迟加载

简介🔊

你好，世界！🌎
从现在开始，我想开启一个名为 的新系列React optimization。我们将讨论各种有助于提升 React 应用程序性能的 React 优化技术。🚀

今天的主题是IMAGE LAZY LOADING🔥

我们都知道，应用程序渲染完成后，资源（图片）的加载需要时间。资源越多，加载时间就越长，这会影响应用的性能。为了避免这个性能问题，我们可以只在需要（需要显示）时加载图片。假设页面顶部和底部各有一张图片。首先，我们需要渲染顶部的图片。之后，当页面滚动到底部时，再渲染底部的图片。这有助于减少应用的初始渲染时间，并仅在需要时消耗数据。

优势🔊

🔴 更快的初始加载时间：通过延迟加载非立即可见的图像，可以缩短页面的初始加载时间。这将带来更快、更灵敏的用户体验。

🟠 减少带宽占用：仅加载实际需要的图片，从而降低整体带宽消耗。这对于使用移动设备或流量套餐有限的用户尤其有利。

🟡 更流畅的滚动：延迟加载图像可确保图像在用户滚动时加载，从而防止因图像加载过重而导致的滚动不顺畅或滞后。

🟢 内容优先级：可以首先加载关键内容和功能，从而提高感知性能和用户参与度。

🔵 提高搜索引擎排名：搜索引擎青睐加载速度更快的网站，这可以对您网站的搜索引擎排名产生积极影响。

🟣 降低跳出率：更快的加载时间可以降低跳出率，因为用户更有可能停留在加载速度快的网站上。⚫️
减少服务器负载：通过仅加载必要的图像，可以减少服务器负载和资源使用量，从而可能降低托管成本。

⚪️ 大型图库：对于具有大量图库或内容繁多的页面的应用程序，延迟加载有助于确保性能保持最佳。

🟤 渐进式增强：随着图像的逐步加载，即使互联网连接速度较慢或设备性能较差的用户仍可获得功能齐全且响应迅速的体验。

方法🔊

import React from "react";

function ImageLoading() {
  return (
    <div>
      <div style={{ height: "120vh" }}></div>
      <img src="https://picsum.photos/700" loading='lazy'/>
      <br />
      <img src="https://picsum.photos/800"  loading='lazy'/>
      <br />
      <img src="https://picsum.photos/900"  loading='lazy'/>
      <br />
      <img src="https://picsum.photos/1000"  loading='lazy'/>
      <br />
    </div>
  );
}

export default ImageLoading;

如果我们通过平滑滚动来观察浏览器网络，我们可以观察到资源随着滚动而调用。但不会一次渲染所有图像。

📌注意：上述方法并不适用于所有浏览器。因此，我们需要安装外部 npm 包来实现此目的。

安装 npm 包react-lazy-load-image-component

现在我们可以使用上述包来实现图像的延迟加载。

import React from "react";
import { LazyLoadImage } from "react-lazy-load-image-component";
import 'react-lazy-load-image-component/src/effects/blur.css';

function ImageLoading() {
  return (
    <div>
      <div style={{ height: "120vh" }}></div>
      <LazyLoadImage src="https://picsum.photos/700" />
      <br />
      <LazyLoadImage src="https://picsum.photos/800" />
      <br />
      <LazyLoadImage src="https://picsum.photos/900" />
      <br />
      <LazyLoadImage src="https://picsum.photos/1000" />
      <br />
    </div>
  );
}

export default ImageLoading;

react-lazy-load-image-component是帮助实现图像延迟加载的优秀库之一。该包还有一些其他功能，但我们现在不讨论它们。您可以在 npm 网站上查看这些功能。

📌注意：尽管图像延迟加载是提升应用性能的最佳方案，但它也存在一些局限性，例如在实现轮播和首屏时最好避免使用。这会影响用户体验。

结论🔊

希望你们喜欢这个概念。我们将在下一篇文章中讨论下一个概念。👍🏻

和平 🙂