Is there a way to pre-load images just using html/css?
5 Answers
Yes you can. There are many tutorials available on this topic - here is one of them.
Comments
Or even easier: <link rel="prefetch" href="path to image"> (Firefox).
<link rel="prerender" href="http://example.org/index.html"> (Chrome)
2 Comments
Ms2ger
Is it? I would have hoped other browsers picked it up already.
try-catch-finally
Note/update:
prefetch is HTML 5 standard. Even though I've yet not tested which browser fully implements this feature (in 2014).If you include an url in your CSS, the image will be downloaded as the .css file is loaded into the document.
1 Comment
saille
Not true, at least not for all browsers. Most browsers load CSS url's on demand, so hover images don't download until user hovers.
Yes: http://perishablepress.com/press/2008/04/15/pure-css-better-image-preloading-without-javascript/
1 Comment
natas
Thanks... that url was already linked to in the above (first) answer.
Yes, there is. There's a technique called CSS sprites.
It basically works by loading one big image and then only displaying certain sections of the image as needed. Obviously, this technique isn't practical for every solution but it's good for many.
A List Apart has a great tutorial on this: A List Apart: Articles: CSS Sprites: Image Slicing's Kiss of Death
