反应如何强制隐藏图像在渲染时加载?
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 上有一个例子。如果您有 更多或更大 图片,这种方法效果更好,因为您可以防止同时加载大量图片。