Question

I’m trying to write some code for the onload() event of a Web page, on which I want to wait for the Web page to appear until all images are loaded on the Web page. I found this:

onLoad event for loading all images

But it doesn’t work exactly as expected or it’s me who doesn’t know how to use it….

So, is this the best way for using the onload event to wait all the images to be loaded or do you recommend another one?

I want the images to be preloaded on this Web Site: The link. The map image is bigger so that’s why it lasts more than the right one. But it can’t be smaller, as it’s a transparent image… So I decided to preload all images after showing the complete Web page. But still couldn’t… Any idea?

Answer 1

I would try setting adding specific class such as loading to the html or body element, hook a function up to the onload event/using jQuery in which you load all the images, and the once the images have been loaded remove the loading class from the html/body element.

Then add some CSS to hide the entire page contents and instead display some loading placeholder in case the loading class is present. Caution should be taken to add this class only when the user has javascript enabled. The js and no-js classes added by Modernizr can aid in doing this, or naturally simply adding the loading class using javascript.

As for the actual preloading, this and this are two quite extensive threads that deals with preloading images.