In a project i just finished, i was making a slide show animation which start automatically when the page load and animate to a certain image based on a query string.
I was using JQuery to implement this simple slide show.
The Problem i faced is that the JQuery animation start to run before the images inside the slide show are loaded, and them make the animation seams as its animate on white screens not images, and will look worse on IE browsers which may give the ‘x’ sign on images which didn’t load yet.
So my mission was to find a way to don’t start the automatic animation until all images have loaded.
At first i just wrote my code in the document.ready JQuery function, but this made my code to run just after JUST the document html have loaded and will not wait till images load.
I found a good solution:
Also found a solution which will work with just an image, incase you want to wait just for an image to load: