How to fix flashing background images in Internet Explorer 6

In the process of using jQuery on a website revamp I encountered a problem I've experienced once before - flashing background images when using jQuery hovers in IE6. It turns out the problem is that IE6 does not cache images properly.

If you're a web developer then you have probably set IE6's Internet Options to check for newer version of stored pages every time you visit it in order to see all the incremental changes you make during testing / debugging. If that's the case then you're very likely to encounter the IE 6 flashing background problem. A typical situation would be using jQuery hover code on an element with a background image specified in the CSS. In this situation you may find that each time you hover over an element the image is reloaded resulting in a flashing effect in IE6. 

One solution to this problem is to change the default of 'automatically', however, you have no way of knowing if the end users of your site will have the same settings so it's possible they experience the same issue.

Upon hitting this issue recently I endeavoured to find a solution rather than adapting my HTML / CSS to fix it as I have done in the past. I also knew that IE6 users would be reasonably common for my client 's potential website user base so it needed fixed one way or the other. A bit of googling came up with an article entitled "Dear IE6: Please Cache my Images.", the article's solution was a bit of jQuery code that makes use of a specific IE javascript command to force background images to stay cached regardless of settings used in Internet Options:

if(jQuery.browser.msie && parseInt(jQuery.browser.version, 10) == 6) {
  try {
    document.execCommand("BackgroundImageCache", false, true);
  } catch(err) {}
}

Add this code to your page and it will fix the flashing image issue with hovers in IE6! Quite a simple solution to an annoying problem that has previously caused me to change my HTML code to fix, I'm glad that I decided to Google a solution this time!

One other thing to keep in mind that is pointed out in the aforementioned article is that this script will enable the caching in IE6 until you quit the browser and restart it so it will affect all sites that you visit in IE6.


Digital Ocean

Meta

Tags: jquery,javascript,ie6,internet explorer

Originally published on 2009-08-04 07:47:09 by Rick Curran

Last edited on 2009-08-04 07:51:32 by Rick Curran

Permalink: http://suburbia.org.uk/blog/2009/08/04/074709.html

Visitor Comments:

Left by EJ on 2009-08-12 07:41:17 #

Nice!

Left by Mohammad Bashiri on 2010-05-17 16:46:01 #

Very nice solution for the very awesome & annoying problem I had & spent a lot time to find what the hell is going on inside IE6 #-O.
Really thanks u 4 that Rick.

Left by Rick Curran on 2010-05-18 01:51:02 #

@Mohammad - No problem, glad that tip helped you out!

Leave a comment...

Comment Preview:




Digital Ocean