I am adding a number of large images for a slide-show to a page, but I want to start loading these images only when the normal part of the page is completely loaded (including the images).
To do that, I am adding the images in the $(window).load()
function:
var slide_total = 20;
$(window).load(function() {
for (i = 2; i <= slide_total; i++)
{
content = '<li><img src="/images/header' + ((i < 10) ? '0' : '') + i + '.jpg" width="960" height="314"></li>';
$("#slideshow li:last-child").after(content);
}
slide_interval = setInterval( "slideSwitch()", slide_duration );
});
The slide-show slideSwitch()
should start when all images are loaded completely, but as it is now, it starts the moment the elements are added to the DOM.
I cannot move the loop to the document.ready
function as I don´t want the slide-show to interfere with the loading of the normal images.
How can I check whether all images are loaded before setting the interval?