Image Preloader With Progress Bar Status Pure Client-Side JavaScript tested in 4 Browsers

[nolan 0]

This is a good concept, although it's not implemented well in this tutorial.Since you're relying on javascript anyway, get rid of the preloader page and just have the preloader bar appear over the current page with the content blacked out below it. This eliminates an extra page transfer (GET request to the server, that is, thus reducing bandwidth). It also eliminates the possibility that someone could link to the page following being transferred away from the preloader, meaning all other visitors who view the page through the link skip preloading altogether.The method I proposed is also much simpler and more concise, as it eliminates the need for you to have to manually enter each image's location information onto another page. Additionally, it'd be reusable across all pages without any changes, whereas the above script is only good for one page (set of images), unless it's specifically modified for another.So, how would you go about doing it this way? I'm not going to actually create the thing for you, but assuming you have a good grasp of Javascript, just do the following:1. Black out the page by creating a div with a high z-index value and positioning it absolutely over all other content.2. Use the getElementByTagName method to fetch all <img> elements on the page.3. Build a throw-away array containing each unique image src and attach an onload event listener to each. Use the onload event listener to trigger a preloader update method.4. When the preloader update method is called (when another image on the page has been loaded), increase a variable count of images that have been preloaded and adjust the preloader bar to reflect the progress.5. When the final preloader update has been called (when the preload count reaches the throw away array length, that is), set the array to null and remove the preloader bar and screen fader divs to reveal the page below (with all images loaded).Problem solved. No need to worry about having an extra page/redirect, source duplication, or direct linking, and you get the added benefit of a JS file that's reusable on any page.