javascript - 加载图像时反应显示页面

在过去的两个晚上，我一直在努力解决 React 中的一个问题。我有一个网站，其中包含多张图片（标题、一些画廊图片、一些很酷的照片）。我希望页面在所有图像都正确加载的那一刻全部呈现。

有人告诉我使用生命周期钩子，但这似乎不起作用，因为渲染过程比某些图像需要加载的时间要快。

这一次我认为我设法通过执行以下操作使其工作：将内联样式添加到容器 div 中说不显示。然后将 onLoad={method to trigger a display:inherit} 添加到容器 div 中。

但是当我使用更大的图像（15MB，只是为了测试它）时，加载可能是成功的，但仍然需要时间才能在页面上显示。所以它最终没有奏效。它只是“看起来”有效，因为其他图像加载速度更快。

任何人有任何其他想法来解决这个问题？

最好的祝愿，

标签： javascriptreactjs

如果您知道页面上的图像数量，您可以做一个从零开始的计数器，并在每个图像上放置一个 onLoad，当图像加载时，计数器会加一......然后做一个条件：

 {counter===numberOfImages? <Content><Content/> : null}