To Preload or Not to Preload

[vkbarefoot]

In regards to preloading images. I am seeing several ways to do that and I am also reading here on this forum that it doesn't make any difference if you preload or not.

Any comments?

[techno_race]

Hmm.......................................

Why do you want to preload them?

[stupidav]

The olny reason I have ever proloaded images, for an instant rollover effect, and was concerned about what the rollover effect would like to someone on dial up.

[Twey]

In this case, it's most definitely a good idea to preload images.

Preloading rarely does any harm; in this case it would do a lot of good, because the images will (or at least could) load before the user causes them to be displayed.

You might also want to only set up the mouseover (if you're doing it with JS) once the images have loaded. That way, if someone does mouse over the image before the replacement has loaded, they just won't get the mouseover effect, rather than having the original image replaced with a blank "could not load image" box.

[tech_support]

What harms are there?

[alexjewell]

I probably use a weird method to preload images...

.preload{
width: 1px;
height: 1px;
display: none;}

<img src="ex_hover.jpg" alt="Preload" class="preload" />

I have that before the instance where the hover image is needed. That way, the hover image begins loading before the before image does.

[Twey]

Setting the width and height is kind of pointless when you're using display: none.

A blank alt should be used here since the image provides no information (and will never be seen anyway).

You're still using XML syntax.

This is useful if you want to do CSS rollovers. However, if JS is being used preloading images like this is a waste of time and bandwidth for non-JS users, and offers less control.