Answered by:

Image size is incorrectly cached when the image is modified.

Question

On a web page you can dynamically load an image in javascript and then display the size of the image. No problem. Then if you overwrite the image with one of a different size (but the same name) the new image will display but the old size is cached. The really bizarre thing is that if you close your browser and clear your cache and then go back to the page it STILL gets the size wrong.

Does anyone have a solution to this where the correct image size can be retrieved after the image has changed? Why does IE cache this?

Notice the highlighted lines? For some reason that is not yet clear to me, setting src in the call to createElement() forces the image to size properly. From what I can tell, the resizing problem appears when you set src after the call. There may be more to it than what we're seeing here, but at least this should help you get up and running.

All replies

I ran your sample (please remember to check the code sample checkbox in the future) and wasn't able to reproduce the problem you reported. I notice that the sample you provided doesn't appear to load a different image. Can you clarify the steps to reproduce your problem. Alternatively, you could rework the sample.

Hi Lance. Sorry I forgot to check the box. I appreciate you getting back to me on this.

Repro steps:

1. Create a html file that contains the sample html code from my first post and copy it to an available IIS virtual directory.

2. Create a GIF image file in the same directory as the html file and name it "test1.gif" to match the name used in the html code.

3. Navigate to the web page using IE 7 and verify that the image loads.

4. Click the "Get Size" button and make a note of the width and height returned.

5. Close the browser.

6. Open the "test1.gif" image file and change the size. You may also want to modify the image visually. Or you can completely replace it with a different image (as long as the size is different) but the name of the image must remain "test1.gif".

7. Open IE 7 and clear the cache.

8. Navigate to the web page and verify that the new image loads and looks correct..

9. Click the "Get Size" button and make a note of the width and height returned.

The problem is that although the image does indeed change and the page does show the correct image, the size of the original image is returned instead of the size of the new image. I have a product in the marketplace that is choking on this because a client is using images with the same name but different sizes and IE won't grab the new size. Is there a way to clear the image size cache?

Notice the highlighted lines? For some reason that is not yet clear to me, setting src in the call to createElement() forces the image to size properly. From what I can tell, the resizing problem appears when you set src after the call. There may be more to it than what we're seeing here, but at least this should help you get up and running.

This is still an issue in IE8. I spent 8 hours today trying to find a work around for this problem, but did not find a way to clear the cached image dimensions. Even resterting IE8 does not clear this bizarre internal image cache.

Unfortunantly the suggested solution above:

obj = document.createElement("<img src='test1.gif'>");

won't work for me because I need to attach 'onload' & 'onerror' events before loading the image.

The only solution is to rename the file when changing an image's dimensions.

The disadvantage of this is that either you have to use a unique query string as above every time the page loads, thereby essentially preventing the image from being cached, or you have to hardwire a query string into your code and change that every time
the image is changed.

If you really want the image to be inserted in the document with a query-string-less filename, a slightly obscure alternative is to use the query-string version of the image to get its proper dimensions, then explicitly state those dimensions when creating
an image using the query-string-less filename:

The disadvantages of this approach are (1) it has to load the image twice (at least when the image first changes); and (2) the code has to wait for the query-string version of the image to load before it can load the query-string-less version, though
here's a way around that latter problem: