javascript - React如何强制隐藏图像在渲染时加载？

Question

我正在开发一个商店应用程序，它包含一个产品列表，当您单击其中一个时，它会显示幻灯片。

幻灯片的工作原理是通过 display:none; 隐藏当前未查看的所有图像。因此，您一次只能看到一张图像，除非它们正在转换(滑入和滑出位置)。

我遇到的问题是， react 似乎不会加载我的图像，除非它是可见的。因此，当您第一次尝试筛选幻灯片时，它必须加载每张图像，直到完成一整轮。

有没有办法确保 React 在渲染时加载它们？我尝试将每个图像的不透明度设置为 0 一小会儿，以便给它们所有的时间来加载，但仍然无法加载它们。仅当它们在屏幕上实际可见时。

Answer 1

实际情况不是“渲染时”，而是它们( <img> 标签或 background-image 属性)未渲染。要么 display: none/opacity: 0将被视为“未渲染”，因此不会加载图像。

这个问题与 HTML 的关系比与 React 的关系更密切。

为了解决这个问题，TIMTOWTDI 。

一种方法是将这些图片包装在 <div> 中样式表设置为 overflow: hidden 的标签。图像在 DOM 中渲染，但对用户不可见。这种方式对于更少和更小图片的幻灯片来说效果很好。

另一种方法是使用JavaScript和AJAX通过代码加载图片并按照您的意愿显示。代码可以完全控制一切。一个例子是 MDN - Using Fetch 。如果您有更多或更大图片，这种方法效果更好，因为您可以防止同时加载大量图片。