My website features a vibrant backgroundImage Slideshow that functions seamlessly.
However, I am looking to reload the images of the slideshow after a specific time interval. The issue is that the website keeps loading endlessly.
Once the website has completed loading, a script (slideshow.js) should be activated in the background to load the images.
I have experimented with various methods such as
<body onload="...">$(document).ready(function(){...});<script>startSlideshow()</script> (placed at the end of html)
Unfortunately, all these attempts resulted in the page continuing to load until all pictures were fully loaded.
Any suggestions or tips that could point me towards a solution would be greatly appreciated.
index.php
...
<!-- slideshow-->
<div class="bg-slideshow" title="Background Image">
<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...]*/
}