I have a series of 50 images that need to be displayed sequentially inside a div.
The time interval between displaying each image is initially set at 750 milliseconds and decreases with each subsequent image.
To ensure all images are loaded before the animation begins, I included the following code:
(window).load(function() { });
The animation utilizes the setTimeout method:
var index = 1;
function newImage(index) {
var interval = setTimeout( function(){
$("#image-container .image").css("display","none");
$("#image-container .image:nth-child("+index+")").css("display","block");
clearTimeout(interval);
index = index + 1;
newImage(index);
},delay[index-1]);
}
Here, the array delay contains different delay values like [750,750,650,...].
The animation itself works smoothly, but there's a slight visual glitch where no image is displayed for a split second, showing only the background. How can this be resolved?