我正在开设一个商店应用程序，它包含一个产品列表，当您点击一个产品时，它会显示幻灯片。
幻灯片显示的工作原理是通过display:none;隐藏当前未查看的每张图片。因此，除非它们正在转换（滑入和滑出），否则您一次只能看到一个图像。
我遇到的问题是，除非可见，否则反应似乎不会加载我的图像。因此，当您第一次尝试筛选幻灯片时，它必须加载每个图像，直到它完整。“
有没有办法确保React会在渲染时加载它们？我已经尝试将每个图像不透明度设置为0一段时间，以便给它们所有时间加载但仍然不会加载它们。只有它们实际上在屏幕上可见。
先谢谢！
答案 0 :(得分：1)
而不是＆＃34;在渲染＆＃34;，实际情况是它们（<img>标签或background-image属性）不会被渲染。 display: none / opacity: 0将被视为＆＃34;未呈现＆＃34;，因此不会加载图片。
这个问题与HTML有关，而不是React。
要解决此问题，TIMTOWTDI。
一种方法是将这些图片包装在<div>标签中，该标签的样式表设置为overflow: hidden。图像在DOM中呈现，但对用户不可见。对于越来越少图片的幻灯片，这种方式非常简单。
另一种方法是使用JavaScript和AJAX加载包含代码的图片并根据您的意愿显示它。代码可以完全控制一切。一个例子是MDN - Using Fetch。如果你有更多或更大图片，这种方式会更好，因为你可以防止大量同时加载。