I have lots of images on a html page - how can i make certain ones load first (or certain ones load last)?

i have a page with the main content area being big thumbnails, but elsewhere on the page are about 100-200 other (smaller) thumbs that are not important but must still show.

What ways do i have to make the main ones show first (or the unimportant ones show last)?

I was thinking of these ways:

JS load: on page load (once it has finished loading), use a jquery's append() (or whatever other way) to write the html with the image code

Set all unimportant images inside a div with style="display:none;". Then once the page has loaded, use JS to set it as visible

what do you think is the best way?

You might want to check out the YUI ImageLoader. It basically loads images only if/when they are needed (i.e. scrolled into view).

I would set the 'src' of all images to be a transparent 1 pixel gif and then use JS to loop through the images, 'in order of importance', and set the 'src' attribute on page load.