标题没能准确的描述清楚问题,CSS背景图片出现闪动是因为这个样式加在了a:link a:hover等属性上。在IE6中表现为:鼠标移上链接再移开便会出现短暂的闪烁,从HttpWatch和Fiddler中很明显的看到这个鼠标动作加载了两次该背景图片,所以更准确的描述是具有链接属性的背景图片在IE6中闪动和重复加载。
调用JS的execCommand函数即可实现
1
|
document.execCommand(
"BackgroundImageCache"
,
false
,
true
);
|
可以使用js和css expression调用,考虑到改动成本,采用css expression的方式实现。
鼠标在页面上的移动,页面的滚动都会触发css expression去执行,配置较差的机器上会有性能问题。
如果让页面只在载入时运行一次该表达式,产生的影响就微乎其微了。
1
2
|
/*解决背景图片闪动和重复加载的IE6BUG*/
html { zoom: expression(function(ele){ ele.style.zoom =
"1"
; document.execCommand(
"BackgroundImageCache"
, false, true); }(this)); }
|
将上述样式加入到公用CSS中即可。
感谢以下链接的资料提供的帮助
http://ajaxian.com/archives/no-more-ie6-background-flicker
http://kevinpeng.javaeye.com/blog/669264
http://www.planabc.net/2009/09/21/optimization_of_css_eexpression/
http://ued.taobao.com/blog/2010/05/17/ie6-duplicate-load-bug/