Page 1 of 1

js: change background image in ie

Posted: Sun Nov 28, 2004 2:02 pm
by newmember
hi
i have a loop where each iteration changes background image of div
the problem is that IE always downloads the image despite that it already was displayed many times earlier....

Is there a way to cashe this image and then use it as background image?
(so IE doesn't download it every time it needs to be displayed)

(i know i can cashe image with:
img=new Image();
img.src="path")

thank you

Posted: Tue Nov 30, 2004 8:32 pm
by rehfeld
usually the problem is your server is not sending the correct expires header or something equivalent
that ie can use to determine how long it should keep the image in cache. often w/ css background images
IE will re-download the image every time to make sure it has the latest version of the image.

sending the proper headers fixes this. you can use htaccess to do this

Posted: Wed Dec 01, 2004 2:29 am
by newmember
ok i can send headers with php...
i'll check these options

Posted: Wed Dec 01, 2004 3:28 am
by newmember
it seems expires header does help

do you know why js effects in ie have worse perfomance when i use backgrounds images than when i use ordinary images?

Posted: Wed Dec 08, 2004 6:38 pm
by Chris Corbyn
In response to the initial question, yes, adding (in the HEAD of your page) somevariable.src = 'someimage.jpg' forces the browser to store the image in memory before the body loads.

In which case you simply use javascript to call the image source onto the page, calling the somevariable.src instead of someimage.jpg

I use do this for rollovers all the time :-D

PS. This Client Side forum is in need of a bit more attention I'd say. Only a handful of people seem to use/view it so it takes a while to get a response.

Posted: Fri Dec 10, 2004 5:37 pm
by rehfeld
newmember wrote:it seems expires header does help

do you know why js effects in ie have worse perfomance when i use backgrounds images than when i use ordinary images?
i dont think js has anything to do w/ it.
its the fact that its a background image.


for some reason ie likes to redownload background image whever something changes. in fact, i dont think ie caches background images at all(unless you send that header).

you would think in the absence of an expires header, at the very least ie would send an if-modified-since: header to the server to see if the image changed since the last time it was downloaded, but ie doesnt seem to care and just likes to redownload the image regardless unless you send an expires header w/ the image.

once i discovered all this, i stopped using js to switch background images. it works just fine using css. but if you need to switch between multiple images, then of course youll still need to use js.
take a look :)
http://rehfeld.us/hover.html