Silentash-默尘

Web 开发中经常会用到背景图，多数时候我们还需要用 CSS 动态调整背景图的位置。比如 Google 首页中的Toolbar 动画，就是用了一整张背景图，用 JS 控制元素的背景样式，实现动画效果。

不过 IE6 下默认不缓存背景图片，CSS 里每次更改图片的位置时都会重新发起请求，有时会造成图片抖动现象。我们可以用一段 JS 代码告诉 IE6 缓存背景图，这样就能避免再次请求。

document.execCommand("BackgroundImageCache", false, true);

IE7 已经修复了这个 BUG ，所以只需要针对 IE6 就可以了。Ext 的源码时已经考虑到了这一点，在 Ext.js 中给出了他的实现，在其它 Ajax 框架中不是很清楚有没有这种类似的代码，从这一个细节上就能看出Ext的全面！

var isIE = ua.indexOf("msie") > -1, isIE7 = ua.indexOf("msie 7") > -1;
// remove css image flicker
if(isIE && !isIE7){
    try{
        document.execCommand("BackgroundImageCache", false, true);
    }catch(e){}
}


用HTML的条件注释也可以

<!--[if IE 6]>
<script type="text/javascript">
    try{
        document.execCommand("BackgroundImageCache", false, true);
    }catch(e){}
</script>
<![endif]-->


PS: 口水ing Google 首页的Toolbar动画效果^_^