Theory behind javascript preloading?

[rainstorm]

From what I'm reading, the list below is how javascript preloading works?

1. Using an array, create a list of all resource's location
2. Create an image object array
3. Set each image's onload/onerror/onabort to an "image count" function.
4. Once all the images are loaded, execute the main application.

In step 4, once all the images are loaded, is the array of all the resource's location and the image object array no longer needed? I can delete them, and I would still be able to use the "preloaded" resources on-demand right?

Basically, I'm looking for more details on preloading practices, especially after the "main function" execution.

[aj_nsc]

Yep, that's basically it.

You are correct, once all the images are loaded, you don't need to do anything else with the array. The purpose of loading them is just to tell the browser 'hey, go and get the content at this URL for me will you?' and, as browsers do, if it's an image (and no additional headers are passed down with that image telling it not to be cached) the next time the browser encounters that same address it'll say, 'I've already got the content at that address, it's in my local cache on your machine so now I won't download it and I'll just serve it up from your cache!'

[bsmbahamas]

yup, i think that technically you only need to create a new image object and set it's src property to force the browser to cache the image.

all the other stuff above is just to make it easier to pre-load many images.

but i'm pretty sure that you could also just create a bunch of image objects all at once and set their src property but that would be more verbose, and you also would not have a way to tell if they were all preloaded with additional code to check.

like this:
new Image().src='image1.png';
new Image().src='image2.png';

more info here and here