How can I load images for subsequent pages AFTER my first page has 100% finished loading?

Question

I have a startup page to my website that has very minimal content and it comes up almost immediately.

After a user logs in they are presented with a page that loads jQuery, some javascripts and also some images. So that the second screen comes up a bit quicker I would like to pre-load some of the images on the first screen but do this AFTER everything has come up so as to not slow the screen down in any way.

Is there a way I can do this pre-load. Maybe something with javascript (but NOT jQuery). I just want to be sure all the images below are downloaded after everything else?

document-globe.png
control-000-small.png
home.png
folder-open.png
arbo-points-v-end.gif
arbo-points-v.gif
breadcrumb-sep.png

Answer 1

It is unclear exactly what you're trying to do. Here are some things you can do:

1. You can listen for the window.onload event in your startup page which signifies that all resources specified in the HTML of the startup page are now loaded. You can then preload images that will be used elsewhere, either later in this page with dynamic javascript or in subsequent pages. Preloading for other pages will just cause the images to be in the browser cache for those pages (which will speed up their loading).

2. You can take images out of your HTML and insert them via javascript. If doing this, you can let the images in the HTML load first and then using the above window.onload event, you can then load your second set of images and insert them in the page. This is one way to prioritize which images are loaded first/when.

3. You can attach onload handlers to seven specific images in your page and using code in those onload handlers, you can know when those seven specific images are now loaded and then do other things in your javascript code (like start the loading or pre-loading of other images). Because images specified in your HTML start loading before any javascript can attach event handlers to them, you have to specific these type of onload handlers in your actual HTML so they are in effect immediately.

You cannot specify N images in your HTML and magically tell the browser to load the seven of them first before loading any of the others. Browsers/HTML don't have that capability.