Javascript 在一定时间后加载背景图像|无网站加载

我的网站上有一个背景图片幻灯片。幻灯片播放没有问题

我想在一定时间后重新加载幻灯片的图像。我的问题是网站一直在加载

当网站完成加载后，应在后台执行脚本slideshow.js并加载图像

我已经试过了

$document.readyfunction{…}； 在html的末尾开始滑动显示 尽可能地加载页面，直到加载所有图片

我感谢任何可能导致解决方案的暗示

index.php

...

<!-- slideshow-->
<div class="bg-slideshow" title="Hintergrundbild">
  <ul class="slideshow">
    <li><span>Image 01</span></li>
    <li><span>Image 02</span></li>
    <li><span>Image 03</span></li>
    <li><span>Image 04</span></li>
    <li><span>Image 05</span></li>
  </ul>
</div>

...

我的解决方案：

setTimeout(function() {
  console.log("Images loaded");
  var parent = document.getElementsByClassName("slideshow");
  var child = parent[0].querySelectorAll("span");

  for (var i = 1; i < 5; i++) {
    child[i].style.backgroundImage = 'url("images/slideshow/p' + (i + 1) + '.jpg")';
  }
}, 10000);

页面加载正常。使用此代码包含my.js文件后，将启动10秒计时器。10秒后，功能开始工作并替换我的图像文件

再多做一点工作，我就可以一块一块地加载我的图像，并可以保存网络数据

---

睡眠做什么？这似乎很可疑…这只是一个延迟，一个等待页面加载的时间，直到所有图片都加载完毕，因为你是通过css添加的？我不这么认为。这可能是延迟阻塞的一种非常糟糕的方式，或者它不起作用；

.slideshow li:nth-child(1) span {
  background-image: url("../images/slideshow/p1.jpg");
}

.slideshow li:nth-child(2) span {
  /*placeholder (replace by javascript)*/
  background-image: url("../images/foto-404.jpg");
  /*[...animation delay...]*/
}

setTimeout(function() {
  console.log("Images loaded");
  var parent = document.getElementsByClassName("slideshow");
  var child = parent[0].querySelectorAll("span");

  for (var i = 1; i < 5; i++) {
    child[i].style.backgroundImage = 'url("images/slideshow/p' + (i + 1) + '.jpg")';
  }
}, 10000);