JavaScript在背景图像之间切换第一次运行时速度较慢

此代码在两个不同的图像之间切换背景。然而，当它从第一个图像切换到第二个图像时，在显示图像之前，总是有一个1秒的缓冲区，这只在图像第一次切换时发生。我怎样才能去掉缓冲区

function changeBgColor(){
   var img = ['url(img/mechanic.jpg)', 'url(img/start.jpg)'];
   var nImg = img.length;
   var currentImg = 0;
   document.body.style.backgroundImage = "url(img/start.jpg)";
   document.body.style.backgroundSize = "cover";
   document.body.style.backgroundRepeat = "no-repeat";
   var imgChange = setInterval(function(){
        document.body.style.backgroundImage = img[currentImg];
        document.body.style.backgroundSize = "cover";
        document.body.style.backgroundRepeat = "no-repeat";
        if(currentImg == nImg-1){
            currentImg = -1;
        }
        currentImg++;
   },10000);
}

---

这将是由于图像需要加载。第二次切换时，浏览器已将其存储在缓存中。您需要先加载图像，然后再显示它。

能否将两个图像放入单独的div中，并切换使一个可见/另一个隐藏？这将消除在两种模式之间切换时的延迟。

这将是由于图像加载造成的。一旦图像被加载，它就会被缓存，因此在第一次加载后问题就不明显了。为了解决这个问题，您可以使用CSS或jquery预加载有问题的图像

CSS

jQuery

<script>
  pic = new Image();
  pic2 = new Image();
  pic3 = new Image();
    pic.src="images/inputs/input1.png";
    pic2.src="images/inputs/input2.png";
    pic3.src="images/inputs/input3.png";
</script>

pic=新图像（）；
pic2=新图像（）；
pic3=新图像（）；
pic.src=“images/inputs/input1.png”；
pic2.src=“images/inputs/input2.png”；
pic3.src=“images/inputs/input3.png”；

将两个图像加载到页面上，但将它们隐藏起来。这将在页面加载时缓存资源。这个问题可能会对您有所帮助。基本上，您只需要在切换到图像之前预加载图像

<script>
  pic = new Image();
  pic2 = new Image();
  pic3 = new Image();
    pic.src="images/inputs/input1.png";
    pic2.src="images/inputs/input2.png";
    pic3.src="images/inputs/input3.png";
</script>