Classic ASP - IIS 5 to IIS 6 migration causes image caching problems?

Question

Apologies in advance for the long-winded question.

I'm really a database programmer, but have inherited support of a classic-ASP intranet application which has recently been migrated from IIS 5 to a new server running IIS 6. The user-base is about a dozen, all using IE 6.

The UI displays hierarchies of items returned from a database, using a combination of HTML unordered lists and javascript to hide/expand branches as the user navigates.

Images are displayed next to the list members with CSS (using list-style-image), using a different image for each type of item. The number of different item types (and therefore images) in a hierarchy varies between 2 and 10. Hierarchies vary between 20 and 200 items.

The problem:

Since the migration to IIS 6, several users have experienced a problem which appears to be caused by images failing to be properly applied to one or more items in the hierarchy; the list displays correctly, but one or more images is missing and clicking on any link causes an empty page to load.

Analysis of network traffic using Wireshark and the IIS logs show that the problem isn't on the server side - all content has been correctly supplied to the client.

The issue appears to be related to content caching at the client: it seems to more often affect users who have not used the application before on their current PC, or have not used it for some time. Also, I can replicate the issue approximately one attempt in three by starting a session, clearing my browser cache and then refreshing the page. However, the same is true of the application when running on IIS 5, so this issue may have existed before the migration to IIS 6 but have happened less frequently. Occasionally, if I leave the session for 20 minutes or so, the browser seems to "find" the missing images, and everything works OK.

If the application is accessed through a local proxy (I used Fiddler) the problem never occurs, although the Fiddler connection log shows one or more connections made to the server to retrieve the images has aborted. As before, network traffic shows that the image was returned by the server. However, using the proxy seems to enable IE to find other successfully retrieved copies of the image from the cache.

I've reached the point where I'm at the end of my limited knowledge of debugging ASP/IIS issues. Removing the list-style-images from the CSS fixes the problem, but this has to be the option of last resort since it makes the application more difficult to use.

Any suggestions on how I can proceed would be gratefully received.

Edit

AnonJr suggests that this must be a client configuration issue, as all other components appear to be functioning correctly.

I discounted a simple client configuration issue because this is the only application affected by the issue described I have tested all the options under Tools > Internet Options > Temporary Files > Settings with no change in behaviour.

What other client configuration options should I be considering?

Edit 2 - a solution

The accepted answer prompted me to search for a known issue with IE6 requesting multiple copies of images when HTML is generated from client-side script - http://support.microsoft.com/default.aspx?scid=kb;en-us;319546.

The article (having stated that this behaviour is "by design") suggests a work-around of pre-caching the required images by loading them into an invisible DIV:

<DIV style='display:none'><IMG SRC='image.gif'></DIV>

This appears to work for me - I can no longer replicate the problem by clearing my browser cache in the middle of a session, and a Fiddler trace shows each image being requested only once.

I did find one caveat which I wasn't aware of before; the IE cache is case-sensitive, so a cached image will only be used if the case of the file name specified in the invisible DIV matches that used elsewhere in the page.

Answer 1

You may want to focus your attention on tweaking the caching settings on the client end. If the images are being sent by the server, then its not likely to be an IIS issue. If the HTML for the images is being sent to the browser, its not an ASP issue. That leaves the client.

The proxy may be mitigating some of the issues, and/or it could be a factor in how IE6 decides to cache images, etc.

Answer 2

This smacks of an IE6 bug where the browser makes multiple requests for the same resource. For example if the content calls for the display of a small icon repeated 20 times in a list, instead of just fetching that image once, it attempts to fetch it 20 times. OK 19 of the responses are 304 Not Modified but that's still 19 extra round trips to the server.

I've found in the past with this excessive requesting eventually you end up with too many unfullfilled requests. At that point further requests to the server even for other pages struggle to get a response, at least for a while.

I'm not sure that this is what is happening in your case, one way to examine this is to use IE7 instead to see if you get the same problem, this bug was fixed in IE7.

Edit: Now that the problem is confirmed to be the bug I was refering to you should also note the KB reference to a 'short time delay'. The underlying problem is that in order to re-use a newly fetched image the browser needs to do work that is defered until the current chunk of javascript has completed. More than a 'short time delay' is needed, an asynchronous approach is needed.

I've used the display:none DIV approach to pre-fetching the images and this works well for AJAX style work. However if you have code running during or before the onload event of a window you will still have the problem when adding images in this code. A setTimeout is needed in order to get further code to run after the onload event is complete.