Question

我的网站上有一个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...]*/
}

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

Page加载normaly。使用此代码包含我的.js文件，启动10秒计时器。 10秒后，函数开始工作并替换我的图像文件。

通过更多工作，我可以逐个加载我的图像，并可以保存网络数据。

Google Chrome Network stats

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

1 个答案: