Asynchronous Image PreLoader?

[jj]

I have a grid of thumbnail images. When you rollover the images a larger
image is shown.

I want to pre-load the large images so that the rollovers are quick
(currently the large image take a few seconds to load). Ideally I'd like the
pre-load to happen in the background so that the page does not take too long
to load.

Is this possible? Anyone done this?

Thanks
JJ

 

[Hans Kesting]

jj formulated on dinsdag :

I have a grid of thumbnail images. When you rollover the images a larger
image is shown.

I want to pre-load the large images so that the rollovers are quick
(currently the large image take a few seconds to load). Ideally I'd like the
pre-load to happen in the background so that the page does not take too long
to load.

Is this possible? Anyone done this?

Thanks
JJ

GIYF

search for "preload image javascript"

Hans Kesting

 

[jj]

Hi Hans,

I have written a javascript image loader, but I can't see any examples of
doing it asynchronously. It may be a simple change to use AJAX to call this
javascript, but I'm not sure...
Thanks,
JJ

 

[bruce barker]

all image loads are async. so the standard trick of creating an img,
then assigning the src is all you need. use
window.setTimeout(loadImagesRoutine) to get the image loads to happen
after the browser finishes page parse.

one problem with this approach is browser download queuing. if you had
20 images and queued up the downloads then the user rolled over image
20, they will not see it until the other downloads complete.

if you have a large number, you should do them in chunks. you can check
the readyState to know if an image has been downloaded. do 1 or 2 at a time.


-- bruce (sqlwork.com)