View Full Version : Preloading & CSS

03-02-2003, 08:04 PM
How can I preload the following background for a <span>?


03-02-2003, 08:30 PM
The same as you would preload any image using JS:

1. create a new image object ;
2. set its src property to the URL of the image file you wish to preload;

I could write you some sample script, but you better check



There are tons of preloaders there.

03-02-2003, 09:11 PM
I tried using this (http://www.javascriptkit.com/script/script2/preloadimage.shtml) script, from JavaScript Kit, but it doesn't work in this situation... the background image is not preloaded.

Can someone show me an example of preloading an image, such as style="background-image:url(img.gif)", that works for them?

03-02-2003, 11:27 PM
try this

img=new Image();

that should preload it for you.

03-03-2003, 12:23 AM
This is what I tried, and the image does not preload...

(-w3schools- method)

in the <head>...

<script type="text/javascript">
if (document.images)
a = new Image()
a.src = "statue.png"

in the <body>

<span style="width:256px; height:255px; background-image:url(statue.png); background-repeat:

Has anyone actually preloaded a background image this way?

It doesn't seem like using img.src="" would work for background-image:url

03-03-2003, 10:39 AM
Go to that thread:

How do I know if preloading works? (http://www.codingforums.com/showthread.php?s=&threadid=15557)

It may help you.

03-03-2003, 11:10 AM
preloading works on the assumption that the images you're loading, aren't immediately visible to the user. example: mouse rollovers. the first image is not the one that gets preloaded. we only need to load that one normally. the one that needs to be pre-loaded, is the second image, the one that we display when we move our mouse over the "mouse-over" object. if we don't pre-load it, then there will be that short space of time, just after we've brought our mouse to rest on the mouse-over, where there's nothing to see while we wait for the image to download.

now, let's compare your scenario, to the mouse over scenario: you can't. as we stated before, pre-loading works on the assumption that the images you pre-load aren't immediately visible, and the image you're trying to preload here, is immediately visible. as such, you're not pre-loading it, you're just issuing a second command to load it.

03-04-2003, 11:08 PM
Thanks for clarifying. :cool: