Caching Problem
The problem is that IE does not cache images at all if they are referenced in DOM javascript. The effects of this are obvious: pages are slower to load and bandwidth is consumed unnecessarily. When I came across this, I didn't try and change IE settings so it may be that you can fix the problem by playing with Tools > Internet Options. But more to the point I wouldn't want to fix this by tweaking my settings, I'm operating a public website and it should work well with out of the box settings.
Sadly there is no quick fix and no workaround. I have confirmed it to be a problem in IE 6 and IE 7.
Scenario
Here is a scenario to reproduce
Real Life
What I've just described is all a bit abstract and you're probably thinking 'yeah, but why would you want to do that? Give me real scenario.' Well, here it is. Have a look at this snapshot:
There is a main image and below it thumbnails, each with mini icons above and below. The mini icons are used to manage photos, the arrows allow you to move them left and right while the A and X icons allow you to edit the photo title and delete the photo. When you click on any mini icon the meta data for this widget changes and communicates this to the back end asynchronously.
There are two situations where this widget needs to create image nodes and they are when it initialises and when meta data changes (since it synchs with the database). Obviously, when this happens the browser has to render each mini icon. In firefox one loads and they all appear at the same time. In IE one loads, then another, then another. You get bored go and grab a coffee, still loading, come back, still loading, take a sip, the next one appears... OK that's exaggerated but you get the picture.
What To Do?
So what should I do about this on bulgariaseaview.com? This is where my earlier decision to work on this project independently begins to pull it's weight. There is no one to answer to here, so I have opted to leave it working slowly in IE and added a note recommending the use of firefox.
It's a bit naughty, after all who am I to tell anyone what browser they should use? But on the other hand imagine how completely I would be ignored if I asked Microsoft to fix their code and maybe by explaining why it works better in a more compliant browser it will convince users to stop using inferior ones.
The problem is that IE does not cache images at all if they are referenced in DOM javascript. The effects of this are obvious: pages are slower to load and bandwidth is consumed unnecessarily. When I came across this, I didn't try and change IE settings so it may be that you can fix the problem by playing with Tools > Internet Options. But more to the point I wouldn't want to fix this by tweaking my settings, I'm operating a public website and it should work well with out of the box settings.
Sadly there is no quick fix and no workaround. I have confirmed it to be a problem in IE 6 and IE 7.
Scenario
Here is a scenario to reproduce
- create multiple image nodes iNode = document.createElement('img')
- set the same source attribute on the images iNode.src= uriSrc
- append the images to an existing DOM node domNode.appendChild(iNode)
Real Life
What I've just described is all a bit abstract and you're probably thinking 'yeah, but why would you want to do that? Give me real scenario.' Well, here it is. Have a look at this snapshot:
There is a main image and below it thumbnails, each with mini icons above and below. The mini icons are used to manage photos, the arrows allow you to move them left and right while the A and X icons allow you to edit the photo title and delete the photo. When you click on any mini icon the meta data for this widget changes and communicates this to the back end asynchronously.
There are two situations where this widget needs to create image nodes and they are when it initialises and when meta data changes (since it synchs with the database). Obviously, when this happens the browser has to render each mini icon. In firefox one loads and they all appear at the same time. In IE one loads, then another, then another. You get bored go and grab a coffee, still loading, come back, still loading, take a sip, the next one appears... OK that's exaggerated but you get the picture.
What To Do?
So what should I do about this on bulgariaseaview.com? This is where my earlier decision to work on this project independently begins to pull it's weight. There is no one to answer to here, so I have opted to leave it working slowly in IE and added a note recommending the use of firefox.
It's a bit naughty, after all who am I to tell anyone what browser they should use? But on the other hand imagine how completely I would be ignored if I asked Microsoft to fix their code and maybe by explaining why it works better in a more compliant browser it will convince users to stop using inferior ones.
Leave a comment