[CSS] Pre-load Images

[Andrew Lyle Global Moderator]

I was planning on doing this with Javascript, but heard I can use CSS to preload images.

I tried googling this, but only found out that you can, with no source code...

[Colin-uk Veteran]

hmm never knew you could do that :p

found these on google, lol: (apparently you just load the image outside of a viewable area)

http://www.netmechanic.com/news/vol6/css_no18.htm

http://www.ilovejackdaniels.com/css/preloa...mages-with-css/

http://www.killersites.com/articles_2005/t...eloadImages.jsp

how did you not find those, they were the first 3 results :p lol.

http://www.google.co.uk/search?q=preload+images+css

[evo_spook]

preload css?

I've really only come across it when use the sliding door navigation method

http://www.alistapart.com/articles/slidingdoors/

[Andrew Lyle Global Moderator]

I did find those links actually, but heres what I had problems with

http://www.netmechanic.com/news/vol6/css_no18.htm

Uses HTML.. i was looking for a full CSS solution

the second link:

http://www.ilovejackdaniels.com/css/preloa...mages-with-css/

It uses CSS, but positions it at -1000 -1000... it works, but could be messy couldn't it?

and the third uses html again, but it's using hidden boxes.

I was hoping for a line or two of code I could add into my CSS, to preload the images that will eventually be mouse over images

[evo_spook]

I was hoping for a line or two of code I could add into my CSS, to preload the images that will eventually be mouse over images

use the sliding door method then if its for mouse overs.

eg:

image is 10px wide, and 20px heigh, with the before at 10px, and the rollover 10px below it.

and put the css hover as shifting the background position -/+ 10px

[sweetsam]

^^ Thats the way I would do it. If you have one image that you want to use for the hover state only then you can set the same background for the normal state except give it a vertical or horizontal position of -xx px where xx is a number greater than the height or width respectively.