Question

I’ve seen a few tutorials on how to create a JavaScript preloader for images. Is it possible to use a JavaScript preloader for other JavaScript?

My website uses mootools (and others too) for animations and a copious amount of pictures, etc — therefore it takes awhile to load. Is it possible for the website to have a “loading” centered in the page — and nothing more — until all the Javascript libraries load, all the images load, etc. The website has around 300k of JavaScript (compressed), 800k of images on the front page.

In pure flash design, it’s possible to have the flash movie simply say loading before any of the associated libraries, other code, images, download and appear. Can this be done in JavaScript?

Answer 1

Execute all your code on window.onload()

Here’s a ridiculously simple example to give you the basic idea: http://jsfiddle.net/kennis/jHJ3T/1/

Think of the hideous red div as your preloader. Once the document loads all the resources (images, js files, whatever), the preloader disappears and your content is now visible and your javascript libraries have been fully loaded and are ready to execute.

If you want run the jsfiddle example more than once, change the “random” values at the end of the image tags so your browser doesn’t pull cached versions.