Javascript preloader more javascript

Question

I saw several tutorials on how to create a JavaScript preloader for images. Can I use a JavaScript preloader for other JavaScript?

My site uses mootools (and others) for animation and a large number of images, etc., so it takes some time to load. Is it possible for the website to have a “download” in the center of the page and nothing else - until all Javascript libraries have loaded, all image downloads, etc. The website has about 300 thousand JavaScript (compressed), 800 thousand images on the first page.

In a pure flash design, it is possible for a flash movie to simply download the download in front of any of the associated libraries, other code, images, downloads and appearances. Can this be done in JavaScript?

Answer 1

Run all your code on window.onload ()

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

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

If you want to run the jsfiddle example several times, change the "random" values ​​at the end of the image tags so that your browser does not pull out the cached versions.