Preload Images

[shapper]

Hello,

Is there a way to preload a few images of a page using only CSS?
If yes, how can I do it, and should I use CSS or Javascript to do
this?

Thanks,
Miguel

[Andy Dingley]

On 26 Nov, 11:16, shapper <[e-mail]:

Is there a way to preload a few images of a page using only CSS?

(short answer)
Yes. It just does this, it does it automatically, stop worrying about
it, everything is already working in the best of all possible worlds.
No further action is required of you.
(longer answer)
It's hard to say what "preload" means. It's not part of a web page
itself, it's something you've invented on top of this. What you've
invented might be different to what I've invented, so I can't say for
certain how yours will work.

In the past, JS was often used for menu roll-overs and the like. These
needed their "hover" images to be pre-loaded with the initial page
load, otherwise the first rollover action was obviously slow.
"Preloading" was a necessary technique.

Nowadays we use CSS for menu rollovers, not JS. If any preloading is
needed, this will have been taken care of automatically for us, by
competent browser implementations. No more effort is required, other
than competent CSS page design and coding.

This is because browsers (typical ones) understand CSS and can
recognise a likely need to preload an image (any resource named in the
CSS is likely to find itself getting loaded early - just watch the
traffic). JS is too complex, too difficult to recognise such a need,
and so the browsers don't try to automate or second-guess this.
OTOH, if you're still building some complex image gallery system with
JS, then there might be a need for preloading of thumbnails etc. This
would depend on what you're building and how you're building it. We
can't know this. CSS is unlikely to be involved it's more likely to be
JS, so you're still likely to have to build your own preloaders as
needed.