Javascript 作为背景图像在预加载的图像对象中循环

我们正在React建立一个网站。我们希望背景图像在10个不同背景的数组中循环。现在，我们正在使用一个divStyle，它设置一个背景图像和一个url，该url每10秒更新一次，以请求下一个图像。这是可行的，但是这会导致每10秒向服务器发出一次请求。是否有一种方法可以在

组件didmount

中加载一次图像数组（第一次加载网页时也是如此），然后在该数组中循环

我们尝试使用

Image（）

对象创建一个数组，但是

背景图像

属性只接受url。我们还尝试在React的呈现方法中使用

Image（）

对象呈现数组，但随后出现“Object not valid as React child”错误，并且在控制台中，该对象显示为

，而标记末尾没有关闭“/”

我们用

Image（）

对象填充数组的循环如下所示：

for (var i = 1; i <= imgNumber; i++) {
  imgArray[i] = new Image()
  imgArray[i].src = '/assets/img/bg'+ i +'.jpg'
}

---

for（var i=1；i它应该只加载一次，然后从浏览器缓存加载它们（即第二个循环不会返回到服务器）-除非你在react代码中确实做了一些事情，每次都从服务器获取它们。现在你添加了一些代码，它们实际上不是背景图像，我的第一条评论仍然有效，第一个循环将加载它们，第二次循环时，它们应该从浏览器缓存中获取，这看起来确实是合乎逻辑的，但是这些图像显示在chrome开发工具的“网络”选项卡中，即使它们是在之前加载的。它应该说：运行上面的循环应该足以预加载它们：。只需确保在开始将图像显示为背景之前执行此操作。当然，如果它们太大，则在渲染时仍可能会闪烁预计起飞时间