IE6でロールオーバー時の背景画像のちらつきを解消する

ナビゲーションメニュー等を作る際、CSSのa:hoverを用いて背景画像を切り替えますが、その背景画像にマウスカーソル（ポインタ）をあわせると、画像がちらついたり砂時計のマークが表示されたりします。

ちらつきのサンプルを見る

これは「background flickr」っと呼ばれるIE6限定のバグで、IE6で表示するとロールオーバー時に毎回画像を読み込むみたいです。なので大きいファイルサイズの画像になると動作遅延が起こり砂時計のマークが表示されたりします。まったく迷惑な話です。。。解決策は以下の2通りです。

CSSで解消

 
html { 
    filter: expression(document.execCommand("BackgroundImageCache", false, true)); 
}
 

「expression()」は「ダイナミックプロパティ」というもので、CSS中でJavaScriptを記述できるIEの独自拡張です。なので他のブラウザには適用されません。

※expression()を使うと重くなるかもしれないので、使うときは要注意です。

Javascriptで解消

 
try { 
    document.execCommand('BackgroundImageCache', false, true); 
} catch(e) {} 
 

JSファイルにして外部から読み込めばOKです。

参考サイト：hover時の背景画像ちらつきに対処する - Archiva