一定时间后加载Backgroundimage |没有网站加载答案

【问题标题】：Load Backgroundimage after a certain amount of time | no website load一定时间后加载Backgroundimage |没有网站加载
【发布时间】：2018-08-26 10:16:14
【问题描述】：

我的网站上有一个 backgroundImage 幻灯片。幻灯片放映没有问题。

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

网站加载完成后，应在后台执行脚本（slideshow.js）并加载图片。

我已经试过了

<body onload="...">
$(document).ready(function(){...});
<script>startSlideshow()</script> (at the end of 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>

...

slideshow.js

function startSlideshow() {
  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")';
    /*Wait 2000ms, delay*/
    sleep(2000);
  }
}

function sleep(){...}

style.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...]*/
}

【问题讨论】：

sleep 是做什么的？看起来很可疑……
它只是一个延迟，一个等待的时间
With all possibilities the page loads until all pictures are loaded 因为你是通过 css 添加它们的？
我不这么认为。它要么是一种非常糟糕的延迟（阻塞）方式，要么不起作用。
你试过 $(window).load(function(){ // 执行你的脚本 });

标签： javascript html css ajax web

【解决方案1】：

我的解决方案：

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);

页面加载正常。将我的 .js 文件包含在此代码中，一个 10 秒的计时器就会启动。 10 秒后，这些功能开始工作并替换我的图像文件。

再做一些工作，我可以逐个加载我的图像，并可以保存网络数据。

Google Chrome Network stats

【讨论】：