用React和HTML绘制多个图像

如果你有一堆缩略图要显示,这些缩略图的源图像绝对不应该是原始的全尺寸图像。如果这些图像很大,客户端下载它们将需要很长时间,无论 怎样 您可以在客户端上渲染它们。

当确定要向客户端显示的图像时,服务器上应该有两个版本:

• 缩略图版本-分辨率低,文件大小小,易于下载和一次渲染多个
• 全尺寸版本,当用户想要放大其中一个时下载

可能是全尺寸版本 不应该 必然是原始图像。例如,如果原始映像是20MB(是的,它们可以存在),您就不想给客户端带来负担。因此,您需要在服务器上对缩略图版本和“完整”版本进行调整大小和优化,这样在客户端尝试放大和完全加载全尺寸图像之间就不会有太大延迟。

我的建议是,将图像类型转换为更具性能的类型,如.web或.jpeg,并为元素提供精确的宽度和高度属性。

react还有一个使用react.lazy()延迟加载图像的功能,可以显著提高网络性能

对于前端客户端来说,处理大型图像的工作量太大。您应该以较小的尺寸获取这些图像,以便按原样显示它们。

想象一下,有人试图用一台旧电脑,甚至一部旧智能手机来使用你的应用程序,你不应该依赖客户端的处理能力来处理所有这些繁重的工作。

我希望我的回答对你有帮助!

Jpegs是你应该使用的,也可以看看函数Preload()