Non displaying images not to download, until they are displayed

[Jeremy_H]

This seems like one of those gray areas between two forums,

I have a select menu on my website where one can select different options. As a different option is selected, a paragraph and an image on the right of the page changes accordingly.

This is done with a javascript that changes the CSS display properties different IDs, with each paragraph/image set having a unique id. If the default option is showing, then the first paragraph and image is also showing, with all the rest of these paragraph/images set to display:none.

However, the way the page is setup right now, when the user loads the page, all the images download, even the ones set to display none.

Most of my users will never select any other option besides the default one, but if they do, I wouldn’t mind them having download one more image when they make the change, especially if it will cut my image transfers to just 1/10 of what it is now!

Would this even be possible, to have non displaying images not to show, until they are displayed?

Thanks!

[JAB Creations]

I wasn't sure myself if display: none images loaded initially or not, thanks for that info Jeremy.

I would imagine you could use JavaScript to load an image later on or even more specifically AJAX. I won't be of any real help beyond possibly useful suggestions though, definitely worth keeping track of however. :)

[Jeremy_H]

I just did some experimenting with creating a DIV, and setting this DIV’s CSS to display none, and to have an image background.

When viewing this page, I could see the status bar that this image was loading.

I was really hoping I might be able to use some type of elegant CSS solution, but it looks like I might have to turn to Javascript.

Lame :(

[garann]

Why don't you set the background to - I hate to say it - some kind of spacer gif? Then you can switch to your real image if the option is actually selected. Rather than just switching the display property, switch the class name. Include

display:none;

and the spacer background in your default class, then use your real image as the background in the activated class.

From mistakes I've made with rollovers and not preloading images, it seems like images in unused classes get downloaded on the fly.

[Jeremy_H]

Thanks garann for the idea.

Unfortunately it seems like it’s going to be a trade off of smaller HTML file size/larger Image size/higher compatibility WITH larger HTML file/smaller Image size/less computability.

I think I’ll stick to how the site is currently setup.