javascript - 如何在 ReactJS 应用程序中使用多个图像？

Question

我有一个 ReactJS 应用程序。我有 100 张国旗图片（图标）。我需要在我的应用程序中使用它们。我有 2 种方法可以做到这一点，想知道这样做的最佳方法 - 1）我只需要进行 1 次 hhtp 调用即可获取图像 2）这是处理这种情况的最佳方法。

方法 1 - 我可以精灵化所有 100 张图像。然后进行 1 次 http 调用以获取图像并利用背景位置来获取正确的图像。在这种方法中，我想知道 a) 如果使用 CSS Sprites 是现代的方式吗？有更好的办法吗？b) 如果使用 CSS sprites，有什么工具可以创建 Sprite 图像并获得正确的位置值？

方法 2 - 在我的项目中，目前所有图像都在 /src/images 文件夹中。如果我将 100 张图片放在这个文件夹中，它将进行 100 次 http 调用。如果我错了，请纠正我。我可以将它们放在 /public/images 文件夹中，以便捆绑图像并且不会进行过多的 http 调用吗？（如果我引用公用文件夹中的任何图像文件，我会收到错误消息 - '不支持 src/ 之外的相对导入。'）无论如何，您通常将图像放在 /src/images 或 /public/images 内的什么位置？两者都有什么优势？

标签： javascriptreactjsimagebundlecss-sprites

Answer 1

由于图像的使用量如此之大，我建议您使用选项 2延迟加载图像。

假设您的网页上有 100 种产品。如果您在一开始就同时请求所有 100 张产品图片，则会减慢加载时间。使用延迟加载，我们只会加载，比如说，最初对用户可见的 30 张图像。然后，当用户开始向下滚动页面时，我们将继续加载更多图像。这将有助于改善初始加载时间和用户体验。在某些情况下，用户不会向下滚动整个页面，因此根本不会加载某些图像。因此，您最终还可以节省图像传输的带宽成本。

由于您使用的是 reactjs，因此有许多可用的软件包。在这里我会推荐其中一个，但可以随意探索更多：React-Lazyload

您甚至可以通过一些CDN交付图像以进一步加快加载速度。此外，将它们调整为实际需要的大小是一个好方法。此外，您还可以使用以 80-90 质量编码的 JPG，因为它不会对图像质量产生太大影响，但会显着减小文件大小。