Community for Webmasters & Developers - IE DHTML/DOM images caching bug

Community for Webmasters & Developers (http://www.webxpertz.net/forums/index.php)

- DHTML Forum (http://www.webxpertz.net/forums/forumdisplay.php?f=75)

- - IE DHTML/DOM images caching bug (http://www.webxpertz.net/forums/showthread.php?t=34083)

Tole	09-29-2005 09:46 AM

DHTML: IE DHTML/DOM images caching bug

Hi all,

Well, I have some kind of menu, which I'm rendering with innerHTML property inside some divs. Problem is that IE doesn't gets newly created images from cache, it reloads it again, no metter if it is the same image all the time.
IE cache options are on "automatic" (but it shouldn't have this problem even if it's on "every visit to the page" as I understand the standard browser behaveour)

On Opera and Mozzila there is no problem. It works as it should (images are not loaded again)

I found only one similar post but with no solution on http://www.dotnet247.com/247referenc...30/150361.aspx

As I see it, it's explorer bug, but i couldn't find documentation or workaround anywhere.

Here is an example. You just have to provide some existing image name (test.gif), and test shoul be tried on some live server, because on local machine IE loads images too fast so you can't actualy feel the problem.

HTML Code:





<script language="JavaScript">





 function show_pictures()

 {

  var str  = '';

  var ptrn = '<img src="test.gif">';

  var d  = document.getElementById('panel');



  for (var i=0; i<100; i++)

  {

   str += ptrn;

  }



  d.innerHTML = str;

 }



</script>



<img src="test.gif">

<input type="Button" value="Go" onclick="show_pictures()">

<div id="panel">



</div>

Thanks,
Tole

diades

09-29-2005 11:14 AM

Hi Tole

Welcome to the City!:)

The method that you are using is not DOM but just copying a string into the innerHTML. The image is not pre-cached because you are not pre-loading the image. Try this out:

HTML Code:

<?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

 <head>

  <title></title>

  <meta name="description" content="" />

  <meta name="keywords" content="" />

  <meta http-equiv="Content-Type" content="text/html; UTF-8" />

  <meta name="author" content="Keith Parker (diades)" />

  <script type="text/javascript">

  //<![CDATA[

   //preload the image(s)

   imgs = new Image(13,13)

   imgs.src = "test.gif"

   imgs.src = ""



   function show_pictures(){

    for (var i = 0; i<100; i++) document.getElementById('panel').appendChild(document.getElementById("test").cloneNode(false))

   }

  //]]>

  </script>

  <style type="text/css">

  /*<![CDATA[*/

  /*]]>*/

  </style>

 </head>

 <body>

  <img name="test" id="test" src="test.gif" />

  <div>

   <input type="Button" value="Go" onclick="show_pictures()">

  </div>

  <div id="panel"></div>

 </body>

</html>

Tested :xb: :v5: :firefox: :l_opera: :ie:

Tole	09-29-2005 01:10 PM

thanks for quick response

1. dom/dhtml - I'm still mixing it up, but in this case symptoms are the same for both methods.

2. image should be pre-cached because i have img tag with very same picture as src inside html body and it is allready loaded when i press the button

3. no, it still doesn't work :( . in ie status bar still has "n items remaining (downloading picture ....)" when button is clicked.

please check it out
http://www.nazivdomene.hr.lin4.ims.h..._caching3.html - your (dom) example
or
http://www.nazivdomene.hr.lin4.ims.h...m_caching.html - mine (dhtml) example

btw, i chosed to work with innerHTML because it should be quicker in IE
http://msdn.microsoft.com/library/de.../DHTMLperf.asp

and it's easier :).

Roland Alphonso

10-01-2005 10:34 AM

OK.Hmmm... Something funny going on here.

I thought I'd try it on my local server, so I copied the page to a local file. Then I tried to make a local copy of the image, but IE would only allow me to save the image as "untitled.bmp" (a straight copy & paste wouldn't work either).

I know that the "only can save as BMP" problem is sometimes common for IE, but I should point out that this problem doesn't usually occur on my PC (I have just tried some other online gifs, and they save OK).

Next I tried your demo, by hotlinking (apologies) to your online image. The "no cache" problem was still in effect. So now I tried hotlinking to an online GIF picked at random from the web.

..There was no problem with that. The image was cached, and I got 500 copies on a webpage in no time.

My conclusion is that there is some anomaly in the way that you a serving this image that is inducing IE you convert (?) it to an anonymous (?) BMP image in the cache. Thus, every time the page requests test.gif, it isn't there.

Just what kind of server problem this is, I don't know. Mime-type header, perhaps ?

Tole	10-03-2005 11:32 AM

Yes :), that's it.
thanks a looot.

i tried it on my colegues server and it works ok.
now i only have to fight with my host admins to fix it (still not sure what settings are envolved).

btw here are few links on microsoft pages wich are describing problem from explorer point of view.

http://support.microsoft.com/default...b;en-us;810978
http://support.microsoft.com/default...;EN-US;q260650

thanks againt
Tole

Roland Alphonso

10-03-2005 01:07 PM

Not that I know enough about these complexities to be certain, but I have the feeling that the issue, although in some way related, is different from the usual "save images as BMP" problem (wrt the posted links).
- We already know this, of course, because you have shown it to be server-dependent.

Again, I don't have the usual BMP problem on my PC. Also, that problem can always easily be worked around by using copy & paste, or simply drag-dropping the image into an open folder. This workaround doesn't work for this new variation of the disease.

iku	10-20-2005 01:27 PM

Quote:

Originally Posted by Tole

Yes :), that's it.
thanks a looot.

i tried it on my colegues server and it works ok.
now i only have to fight with my host admins to fix it (still not sure what settings are envolved).

I had the same problem. It turned out to depend on cache settings in your browser. Look at Internet Settings -> Temporary Internet Files -> Settings. If you have "Every visit to the page" chosen there -- it will revalidate each added image file. If you have "Automatic" there, it will work just fine.

I've just checked that on your test pages. As far as I know, the default is to have this setting at "automatic". :-)

There is also a solution involving server headers, that will work even for those users, who have "Every visit to the page" setting...

Hope this helps ;-)

Roland Alphonso

10-20-2005 06:31 PM

Hello, iku. That wasn't the problem this time. I don't have that cache setting (and didn't at the time). It also fails to explain why the only "Save as" option was BMP only for images from that server only.

iku	10-21-2005 07:55 AM

Roland,

I tried one of the linked-above test pages in IE 6.0. With cache setting "Every visit" I saw images loading slowly, one by one. Then I switched the setting to "Automatic" and saw the images appearing all at once, immediately.

iku	10-21-2005 08:11 AM

BTW, there is a suspicious HTTP header with this image coming from that server. Here is a complete listing of the HTTP headers of with which the http://www.nazivdomene.hr.lin4.ims.hr/test/test.gif is served:

Code:

HTTP/1.0 200 OK

Date: Fri, 21 Oct 2005 06:55:32 GMT

Server: Apache

Vary: *

Last-Modified: Thu, 29 Sep 2005 11:50:03 GMT

ETag: "3a9100-ad-433bd4eb"

Accept-Ranges: bytes

Content-Length: 173

Content-Type: image/gif

Connection: keep-alive

Here "Vary: *" is suspicious and probably causing problems, only I don't get why it didn't cause problems for me...

Roland Alphonso

10-21-2005 08:08 PM

Looks very suspicious. I have no idea what it means though.

All times are GMT +1. The time now is 04:28 AM.