IE caches wrong image sizes

[kayahr]

Hi there,

I have a strange problem in Internet Explorer (IE6 and IE7). I'm writing a JavaScript application which allows the user to edit a photo composition. So when the user selects a photo then a frame is drawn around it with resize and rotate buttons. Now it happened to me that I replaced these buttons (32x32) with larger images (48x48). The filenames were not changed, I only copied the new images over the old ones. Then I reloaded the page and the new buttons were displayed but their positions were not calculated correctly. After some research I found out that Internet Explorer still thinks the new buttons are 32x32 pixels even if it correctly displays the NEW buttons.

I cleared the caches, I restarted the browser, I even restarted Windows but IE still remembers that the buttons are 32x32. The only solution I found so far is renaming my buttons so IE reads the new image sizes...

I made a simple demo for this problem to show you. First of all I made a PHP script which generates and returns a randomly sized image. Be assured that this PHP script is not the problem and even some cache-relevant headers which may be send by PHP are not the problem. The PHP script is only there to simplify the demo. You can use a static image instead if you like and resize it manually before each request.

http://www.ailis.de/~k/permdata/20070910/iebug/

This simple page just loads an image (test.php, which generates randomly sized image) with JavaScript, waits until it is loaded and then prints the image size. Try it in Firefox and you'll get different image sizes on each request. Try it in IE and you always get the first image size. I have not done this in this demo but in my real application I could see that the NEW image is definitely loaded. Only the image size is wrong. So it's not a standard image cache problem where IE does not reload the image. The image IS reloaded but the image size is always used from the first loaded image with the same URL. I did not found a way to tell IE to "forget" this image size. If you know one, please help!

Also interesting is the fact that it works if the image is also loaded via HTML. The image size is only cached if the image is ONLY loaded via JavaScript. See this example where I also include the image with a standard HTML image tag. Suddenly the JavaScript code works:

http://www.ailis.de/~k/permdata/2007...bug/works.html

All this sounds very strange and is annoying as hell. Sure, I could add a random query string to the URL of the button images but then all browsers would no longer cache the button images at all. Up to now I only see the solution to preload the button images with standard HTML code (Using hidden img tags on the page). If you know a better solution then please help.

[JeremyMiller]

I had something similar to this awhile back. To trick IE into thinking it hasn't cached the image, I appended a random GET variable to the end of the url. For example, if the image's name is my_image.png, then writing my_image.png?random_number=54813778 would be treated as a different image.

[Maik Bolte]

I'm so glad, i found this Posts!
I had the same problem, and it took me 4 hours to find out what the deal is.
It even still exists in 2011 with IE8.
This is a horrible IE bug!

I cleared the cache, went to the temp-directory and cleared things by hand. I even reinstalled IE.
I have no idea where the hell IE is caching that file-size. Must be somewhere in the registry (?).

However, i attached a timestamp, generated by JS, to the filename.
Works fine.

Thanks alot!!!

[mourkis]

This is great! And thx to Maik who confirms that's still a problem. Had been searching for 4h today too xD And thought I was going mad... especially when I found the real source of the problem. Since I'd had to look through different frameworks and ajax requests till i found where the size of the image is actually calculated... wasn't more than
var img = new Image();
img.src = "whatever.jpg";
alert(img.width);
That always gave me the wrong size.
And I totally went crazy when:
document.images[0].src = img.src;
alert(document.images[0].width);
alert(img.width);
was what I'd espected (added <img src=""> to the html first ;) ).
Now to read that's quite the experience others had too... what a relieve :)
I simply hate IEx!!!!
I'll try to add a timestamp to the source.
Thx!