eldiener

How does one programatically force IE to re-render an image on an HTML page rather than using the image stored in the cache

In my HTML page an image changes on the server after a round-trip but IE insists on displaying the image from the cache again. There must be a way in the client side HTML page to programatically force IE to re-render that particular image, else the way IE works is dreadfully broken. What is that way


Re: Internet Explorer Web Development Forcing re-rendering of images rather than using cache

LowRider2112

IE retrieves resources from the cache based on the Internet Explorer cache settings in Tools->Internet Options->Settings. Most are set to "automatic", which has some heuristics to determine when files are "stale."

I'm not sure how your program is setup to work, but have you tried document.location.reload(true)

http://msdn2.microsoft.com/en-us/library/ms536691.aspx





Re: Internet Explorer Web Development Forcing re-rendering of images rather than using cache

eldiener

LowRider2112 wrote:

IE retrieves resources from the cache based on the Internet Explorer cache settings in Tools->Internet Options->Settings. Most are set to "automatic", which has some heuristics to determine when files are "stale."



To which particular setting are you referring


I doubt that one can manipulate this particular setting programatically from client-side javascript code in order to turn off the cache for a particular page so that an image on that page is always re-rendered, as this would be tampering with the client side browser.


LowRider2112 wrote:

I'm not sure how your program is setup to work, but have you tried document.location.reload(true)

http://msdn2.microsoft.com/en-us/library/ms536691.aspx



Does reloading the page force IE to re-render all images on that page, or is it going to just grab the image from the cache, which is what is not wanted My guess is the latter, which of course does not force re-rendering of an image.

The issue is to force an image to be re-rendered rather than taken from the cache, after a round-trip from the client to the server and back again. The server changes the image itself, but the client browser, IE, is still showing the old image by using what is in the client-side cache. I want to force IE to re-render the image from its URL location rather than from its client-side cache since the image, while remaining the same URL, has changed.

I have been told that using HTTP 1.1 cache control headers for the page with a 'no-store' option keeps the browser from storing the page in its cache, thus forcing it to re-render any image on the page after each round-trip, but IE appears to completely ignore HTTP 1.1 cache control headers.




Re: Internet Explorer Web Development Forcing re-rendering of images rather than using cache

LowRider2112

The "Check for newer versions of stored pages" is set to "Automatically" for most IE installs. Make sure it is not set to "Never." You cannot detect these settings with JavaScript, but its good to know why some clients might behave differently than others.

The documentation for reload(true) states that it will refresh resources from the server. Just like if you manually were looking at a stale page in IE and you pressed Ctrl+F5, which forces a server refresh, unlike just simply F5.

Yes, I experienced inconsistent behavior with the headers as well. I haven't tried IE7 though.





Re: Internet Explorer Web Development Forcing re-rendering of images rather than using cache

eldiener

LowRider2112 wrote:

The "Check for newer versions of stored pages" is set to "Automatically" for most IE installs. Make sure it is not set to "Never." You cannot detect these settings with JavaScript, but its good to know why some clients might behave differently than others.


This is good to know but of course a programmer can not control what the end-user decides for this setting.


LowRider2112 wrote:

The documentation for reload(true) states that it will refresh resources from the server. Just like if you manually were looking at a stale page in IE and you pressed Ctrl+F5, which forces a server refresh, unlike just simply F5.



I will try this at work on Monday and hopefully it will solve the problem.

LowRider2112 wrote:

Yes, I experienced inconsistent behavior with the headers as well. I haven't tried IE7 though.



IE7 has the same inconsistency. I simply can not understand how Microsoft can ignore W3C standards in this regard and simply refuse to take the HTTP 1.0/1.1 cache control headers into account when deciding to re-render an image from its cache or from its actual URL. Unless of course it is merely a bug which has persisted through IE5 and IE6 and still persists with IE7, which is a bit hard to believe.





Re: Internet Explorer Web Development Forcing re-rendering of images rather than using cache

eldiener

LowRider2112 wrote:

The documentation for reload(true) states that it will refresh resources from the server. Just like if you manually were looking at a stale page in IE and you pressed Ctrl+F5, which forces a server refresh, unlike just simply F5.



reload(true) does not work. Instead of refreshing resources from the server it repeats the same action which caused the last server-client-server round-trip that occurred, in order to refresh the server, which is exactly what I do not want.




Re: Internet Explorer Web Development Forcing re-rendering of images rather than using cache

FoxTC

Hi Eldiener, Did you ever get this sorted with code/html I'm having the same problem and think I've tried everything to solve it and I still can't get it to stop caching images in ie7.

Please Help.




Re: Internet Explorer Web Development Forcing re-rendering of images rather than using cache

eldiener

FoxTC wrote:
Hi Eldiener, Did you ever get this sorted with code/html I'm having the same problem and think I've tried everything to solve it and I still can't get it to stop caching images in ie7.

Please Help.


No, this has not been solved yet. Firefox gives the same problem as IE. What the magic incantation of content header parameters is to cause these browsers to not grab images from its cache, or even not to cache images in the first place, for a given web page is still a mystery for me.




Re: Internet Explorer Web Development Forcing re-rendering of images rather than using cache

Database Administrator

Undesired Image Caching Problem

I had a similar problem with image caching. I have developed a web application which allows the user to customize stationary with their own personalized wording. I wanted the user to be able to preview their changes without a full-page refresh. So I used javascript to set the url of the img tag to the dynamic .aspx page which returned an image. Great! It loads correctly the first time, but refuses to update when the javascript function is called.

I tried using an Iframe which references a preview.htm page that in turn references my preview.aspx with the same problems. I could refresh the preview.htm inside the iframe but the image was still cached.

I also tried adding the following lines to the preview.htm page:

<meta http-equiv="PRAGMA" content="NO-CACHE" />

<meta http-equiv="CACHE-CONTROL" content="NO-CACHE" />

<meta http-equiv="Expires" content="-1">

Still, no such luck.

If I changed the Iframe to reference (set the src attribute) the preview.aspx directly it worked, but the body of the Iframe displayed a nasty margin in IE7 and Firefox that I couldn't get rid of with CSS applied to the parent page.

Solution

Finally, I tried using javascript to add a bogus current date and time parameter to the filename to make the image name appear unique:

preview.aspx d=20082401010330

This javascript allowed the image to be set. However, I didn't like this approach since it would fill up the user's cache very quickly. The second part of the solution was to set the http header of the response that included the dynamically generated image to "no-store". Since I am using asp.net this was acheived with the following line of code.

Response.Cache.SetNoStore();

Sure enough, once I added that statement, I noticed that images were not being created by IE7 for my preview.aspx page in the Temporary Internet Files folder.

Asp.net C# Code

Response.Cache.SetNoStore();

Javascript Code

var now = new Date();

var today = "" +

now.getYear() +

now.getMonth() +

now.getDate() +

now.getHours() +

now.getMinutes() +

now.getSeconds();

// Apply superfluous date parameter so the

// dynamic image can be applied (using Prototype.js library although not necessary)

$('preview').src = 'preview.aspx d=' + today;






Re: Internet Explorer Web Development Forcing re-rendering of images rather than using cache

FoxTC

Hi,

Thanks for your response, would I need to use both the javascript and the Response.Cache.SetNoStore(); or will it work with just the Response.Cache.SetNoStore(); ... I'm using .NET 2.0 c#.

Many Thanks,

Fox...





Re: Internet Explorer Web Development Forcing re-rendering of images rather than using cache

eldiener

Database Administrator wrote:

Undesired Image Caching Problem

I had a similar problem with image caching. I have developed a web application which allows the user to customize stationary with their own personalized wording. I wanted the user to be able to preview their changes without a full-page refresh. So I used javascript to set the url of the img tag to the dynamic .aspx page which returned an image. Great! It loads correctly the first time, but refuses to update when the javascript function is called.

I tried using an Iframe which references a preview.htm page that in turn references my preview.aspx with the same problems. I could refresh the preview.htm inside the iframe but the image was still cached.

I also tried adding the following lines to the preview.htm page:

<meta http-equiv="PRAGMA" content="NO-CACHE" />

<meta http-equiv="CACHE-CONTROL" content="NO-CACHE" />

<meta http-equiv="Expires" content="-1">

Still, no such luck.

If I changed the Iframe to reference (set the src attribute) the preview.aspx directly it worked, but the body of the Iframe displayed a nasty margin in IE7 and Firefox that I couldn't get rid of with CSS applied to the parent page.

Solution

Finally, I tried using javascript to add a bogus current date and time parameter to the filename to make the image name appear unique:

preview.aspx d=20082401010330

This javascript allowed the image to be set. However, I didn't like this approach since it would fill up the user's cache very quickly. The second part of the solution was to set the http header of the response that included the dynamically generated image to "no-store". Since I am using asp.net this was acheived with the following line of code.

Response.Cache.SetNoStore();

Sure enough, once I added that statement, I noticed that images were not being created by IE7 for my preview.aspx page in the Temporary Internet Files folder.



I am not using ASP .Net but the content header information already is:

------------------------------------------------------------------------------

Content-type: text/plain
HTTP/1.1 200 OK
Server: ""
Date: Thu, 24 Jan 2008 16:01:45 GMT
Content-type: text/html
Pragma: no-cache
Cache-control: private,no-cache,no-store,must-revalidate
Expires: -1

---------------------------------------------------------------------------------

You can see the no-store in the information above. Nevertheless IE, 6 and 7, still insists on picking up the image from its cache rather than from its URL.