Preloading & CSS

swmr

03-02-2003, 07:04 PM

How can I preload the following background for a <span>?

style="background-image:url(img.gif)"

claudiuiacob

03-02-2003, 07: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
www.Javascriptkit.com

or

www.dinamicdrive.com

There are tons of preloaders there.

swmr

03-02-2003, 08: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?

chrismiceli

03-02-2003, 10:27 PM

try this

img=new Image();
img.src="img.gif";

that should preload it for you.

swmr

03-02-2003, 11:23 PM

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"
}
</script>

in the <body>

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

Has anyone actually preloaded a background image this way?

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

claudiuiacob

03-03-2003, 09: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.

joh6nn

03-03-2003, 10: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.

swmr

03-04-2003, 10:08 PM

Thanks for clarifying. :cool: