反应如何强制隐藏图像在渲染时加载？
React how to force hidden images to load at render?
我正在开发一个商店应用程序，它包含一个产品列表，当您单击其中一个时，它会显示幻灯片。
幻灯片的工作原理是通过 display:none; 隐藏所有不是当前查看的图像。因此，您一次只能看到一张图像，除非它们正在过渡（滑入和滑出位置）。
我 运行 遇到的问题是 React 似乎不会加载我的图像，除非它是可见的。因此，当您第一次尝试浏览幻灯片时，它必须加载每张图片，直到它完成一整轮。
有没有办法确保 React 会在渲染时加载它们？我曾尝试将每个图像的不透明度设置为 0 一小会儿，让它们有时间加载，但仍然无法加载它们。仅当它们在屏幕上实际可见时。
而不是"at render"，实际情况是它们（<img>标签或background-image属性）没有被渲染。 display: none / opacity: 0 将被视为 "not rendered"，因此不会加载图像。
这个问题与 HTML 的关系比与 React 的关系更密切。
要解决这个问题，TIMTOWTDI。
一种方法是将这些图片包装在 <div> 标签中，该标签的样式表设置为 overflow: hidden。图像在 DOM 中呈现，但对用户不可见。这种方式适用于 更少和更小 图片的幻灯片。
另一种方法是使用JavaScript和AJAX将图片加载代码并按您的意愿显示。代码可以完全控制一切。 MDN - Using Fetch 上有一个例子。如果您有 更多或更大 图片，这种方法效果更好，因为您可以防止同时加载大量图片。
我正在开发一个商店应用程序，它包含一个产品列表，当您单击其中一个时，它会显示幻灯片。
幻灯片的工作原理是通过 display:none; 隐藏所有不是当前查看的图像。因此，您一次只能看到一张图像，除非它们正在过渡（滑入和滑出位置）。
我 运行 遇到的问题是 React 似乎不会加载我的图像，除非它是可见的。因此，当您第一次尝试浏览幻灯片时，它必须加载每张图片，直到它完成一整轮。
有没有办法确保 React 会在渲染时加载它们？我曾尝试将每个图像的不透明度设置为 0 一小会儿，让它们有时间加载，但仍然无法加载它们。仅当它们在屏幕上实际可见时。
而不是"at render"，实际情况是它们（<img>标签或background-image属性）没有被渲染。 display: none / opacity: 0 将被视为 "not rendered"，因此不会加载图像。
这个问题与 HTML 的关系比与 React 的关系更密切。
要解决这个问题，TIMTOWTDI。
一种方法是将这些图片包装在 <div> 标签中，该标签的样式表设置为 overflow: hidden。图像在 DOM 中呈现，但对用户不可见。这种方式适用于 更少和更小 图片的幻灯片。
另一种方法是使用JavaScript和AJAX将图片加载代码并按您的意愿显示。代码可以完全控制一切。 MDN - Using Fetch 上有一个例子。如果您有 更多或更大 图片，这种方法效果更好，因为您可以防止同时加载大量图片。