I have a weird issue I just started noticing recently. I have an Ajax based web interface for file management for different company projects and the like.

On the page load I have a really simple javascript function that runs and preloads all the images that get swapped onmouseover, etc. However, for some reason, my Firefox wants to get the image from the server each time I mouseover the image (even though its already been received locally). This (potentially) could eat up alot of bandwidth and (definitely) causes a delay in the mouseover effect.

To test more, I loaded up Firefox again, but as no-remote and with a different profile. After installing Live HTTP Headers add-on I loaded the pages and compared the results side by side. For some reason, my main Firefox profile is getting 200 OK response headers from the server, but my test profile is sending "if-modified-since" headers, so apache is returning a 304 not modified.

I've spent all day digging through javascript, php, mysql calls, html validators. How can I get firefox to send the proper headers, or where could I put PHP headers to simulate this when the images are being loaded by javascript? I hope that makes since. Here's the pertinent parts of the headers :

Test Profile:

Cookie: PHPSESSID=
If-Modified-Since: Wed, 31 Oct 2007 19:26:37 GMT
If-None-Match: "11f90012-675-e981d540"
Cache-Control: max-age=0

HTTP/1.x 304 Not Modified
Date: Thu, 01 Nov 2007 19:54:24 GMT
Server: Apache/2.0.54 (Fedora)
Connection: close
Etag: "11f90012-675-e981d540"Default Profile (this is called on every mouseover):

Cookie: PHPSESSID=

HTTP/1.x 200 OK
Date: Thu, 01 Nov 2007 19:53:36 GMT
Server: Apache/2.0.54 (Fedora)
Last-Modified: Wed, 31 Oct 2007 19:26:37 GMT
Etag: "11f90012-675-e981d540"
Accept-Ranges: bytes
Content-Length: 1653
Connection: close
Content-Type: image/gifThanks in advanced.

Edit: The test profile does not send any headers on the image mouseover, only the default one. IE, Opera, Safari, and FF 3 don't either.

Here's how I do hover over effects..


<a class="hoverButton">Hello</a>




a.hoverButton
{
background-image : url('/someimage.png');
background-position : 0px 0px;
packground-repeat : no-repeat;
display : block;
}
a.hoverButton:hover
{
background-position : 0px -100px;
}


Basicly, when you hover over the link the background image shifts up 100 px. No need for javascript, and it only uses the one image, so it is already loaded.

thats pretty clever