I have a backgroundImage Slideshow on my web site. The slideshow works without problems.
I would like the images of the slideshow to be reloaded after a certain amount of time. My problem is that the website keeps loading.
When the website has finished loading, a script (slideshow.js) should be executed in the background and load the images.
I already tried:
<body onload="...">$(document).ready(function(){...});<script>startSlideshow()</script> (at the end of html)With all possibilities the page loads until all pictures are loaded
I appreciate any hint that might lead to the solution.
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...]*/
}
My solution:
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);
The Page load normaly. With including my .js file with this code, a 10sec timer starts. After 10sec the functions start working and replace my Image Files.
With a bit more work i can load my images piece by piece and can save network data.
