Creating a loading screen in HTML5

Question

I am having some issues finding a decent tutorial for generating a loading style screen with regards to HTML5. To be quite honest I\'m not sure exactly where to begin...

<

Answer 1

An old question, but it is usefull to know that the Image object also has an onload event. It is often way better to use that than check for complete in for example a loop.

Example usage (not actually checked if working):

var numImagesLoaded = 0;
function incrementAndCheckLoading(){
    numImagesLoaded++;
    if(numImagesLoaded == 2){
        // Do some stuff like remove loading screen or redirect to other URL
    }
}    

image1 = new Image();
image1.src = "image1.jpg"
image1.onload = incrementAndCheckLoading;
image2 = new Image();
image2.src = "image2.jpg"
image2.onload = incrementAndCheckLoading;