解决IE6下背景图片闪烁问题的方法及实例

发布时间:2020-02-17编辑:脚本学堂
打开网页时,有时会看到背景图出现短时间的空白或闪烁,那么IE6下背景图片闪烁问题如何解决呢?本文针对此问题列举实例来给大家讲解。需要的朋友不要错过。

ie6背景图片闪烁execCommand.如果为超级链接定义上述的css样式以实现鼠标悬浮时的动态效果,firefox下是没问题的,第一次加载之后,浏览器都会从缓存读取背景图片;而IE6在这里有一个bug,它每次都从服务器端读取背景图片,后果就是,如服务器反应较慢hover效果就会出现短暂的空白。如下:

复制代码 代码示例:

   1.a {}{
   2.   background:url(images/normal.gif);
   3. }
   4. a:hover {}{
   5.   background:url(images/hover.gif);
   6. }

一般都是通过“两张背景图片合并、background-postion控制位置”的方式解决问题的,效果不怎么样。无意中发现了一个比较妥善的解决方案,具体来说就是在页面中加入一段简单的javascript脚本,告诉ie6:本地有背景图片的话就不要麻烦服务器了。
 document.execCommand("BackgroundImageCache",false,true);
脚本放置方式有两种:
1.纯css方式,在css中加入如下代码
  

复制代码 代码示例:
1. html {}{
   2.     filter: e-xpression(document.execCommand("BackgroundImageCache", false, true));
   3. }

2.随便在页面中哪个位置(head、body或者onload)调用上面提及的脚本,例如:
 

复制代码 代码示例:
 document.execCommand("BackgroundImageCache", false, true);

由于e-xpression严重影响浏览器效率,建议采用第二种方式。
总结方案:普通、hover状态对应的图片合并成一张,css中通过background-postion控制其位置,页面中加入从缓存读取背景图片的javascript脚本。