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

Question

Hi,

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?

Answer 1

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

Answer 2

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.