IE图片缓存document.execCommand("BackgroundImageCache",false,true)


Posted in Javascript onMarch 01, 2011

Pixy方法受到IE的cache bug影响会闪烁。其实并没有说清楚这个问题,但其实该bug是有条件的,即IE的cache设置为Every visit to the page,而不是默认的Automatically。基本上,只有开发者才会把cache设置为每次访问检查更新,所以这个bug其实不会影响真正的用户 (根据在winxpsp2的ie6下测试,虽然可能仍然调用了一次网络存取的api,但是并没有发生实际的请求,症状就是鼠标有极短时间的抖动,但是图像 不会闪烁)。此外有人发现了一个未公开的方法来让IE对背景图进行缓存: document.execCommand("BackgroundImageCache",false,true)
用这种方法甚至避免了api调用,貌似是直接缓存在IE内存中。

IE6下设置背景图片是不会被真正cache住的,就算服务器做了cache,如果想cache住只能~~~

做过UI设计和开发的人一定知道,IE(不包括IE7)会经常从服务器端重新载入背景图片,好端端的UI界面在IE(不包括IE7)中就这样被折腾着......

Erik发现了一个简单的解决办法(针对IE7以下的IE有效,其实在IE7中已经修复了这个Bug)

程序代码

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

今天阅读Ext的源码时发现Jack Slocum已经考虑到了这一点,在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){} 
}

今 天阅读幻宇的dreamplayer播放器源码时发现幻宇也针对IE的背景缓存进行了修复,只是他并没考虑到IE7中已经不存在这个现象了,这是 evml.js中的一段相关代码~(顺便嘀咕两句:这家伙,写JS从来不加分号的,以前是这样,现在还是这样,这样的话怎么进行压缩呀,汗~下面的代码按 照我的习惯都已加上分号,哪怕只有两三句而已~)

程序代码

window.isIE=navigator.appName.indexOf("Microsoft")==0; 
if(isIE){ 
document.documentElement.addBehavior("#default#userdata"); 
document.execCommand("BackgroundImageCache",false,true); 
}

A while back a lot of people where covering how to work around the bug that IE always
reloads background images from the server, leading to your UI flickering.
Dean wrote one and lots of others wrote the same thing. Today, I saw this simple workaround
(from a fellow Googler who worked at Microsoft before):

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

Much simpler but makes me wonder why this is not the default setting?

/**
* 相关回复
* by Nicholas C. Zakas @2007-02-26
*/
I've actually wondered about this "bug" for a while.
I'm sure somewhere along the line this decision was made for a logical reason…
maybe they didn't anticipate how much background images would be used, or maybe they thought
there was some use case under which it would be desirable not to cache the background image.
I'm generally not big on overriding things that seem to be design decisions (which this seems to be).
I've never really thought this was a "bug"…bugs don't usually have switches that say "turn off bug".

Javascript 相关文章推荐
javascript动画对象支持加速、减速、缓入、缓出的实现代码
Sep 30 Javascript
jquery 为a标签绑定click事件示例代码
Jun 23 Javascript
BootStrap的弹出框(Popover)支持鼠标移到弹出层上弹窗层不隐藏的原因及解决办法
Apr 03 Javascript
angular学习之ngRoute路由机制
Apr 12 Javascript
微信小程序本地缓存数据增删改查实例详解
May 24 Javascript
js编写简单的聊天室功能
Aug 17 Javascript
vue-ajax小封装实例
Sep 18 Javascript
bootstrap Table的一些小操作
Nov 01 Javascript
解析Angular 2+ 样式绑定方式
Jan 15 Javascript
JavaScript图片处理与合成总结
Mar 04 Javascript
layui实现checkbox的目录树tree的例子
Sep 12 Javascript
javascript严格模式详解(含严格模式与非严格模式的区别)
Nov 12 Javascript
收集的10个免费的jQuery相册
Feb 26 #Javascript
jQuery 1.5.1 发布,全面支持IE9 修复大量bug
Feb 26 #Javascript
20款超赞的jQuery插件 Web开发人员必备
Feb 26 #Javascript
js对象的比较
Feb 26 #Javascript
基于jquery循环map功能的代码
Feb 26 #Javascript
textarea中的手动换行处理的jquery代码
Feb 26 #Javascript
JS 面向对象之神奇的prototype
Feb 26 #Javascript
You might like
PHP求最大子序列和的算法实现
2011/06/24 PHP
PHP中调用SVN命令更新网站方法
2015/01/07 PHP
jQuery+CSS 实现的超Sexy下拉菜单
2010/01/17 Javascript
javascript之Partial Application学习
2013/01/10 Javascript
js获取及判断键盘按键的方法
2015/12/01 Javascript
AngularJS入门教程之静态模板详解
2016/08/18 Javascript
js格式化时间的简单实例
2016/11/27 Javascript
vue项目中使用scss的方法步骤
2019/05/16 Javascript
Vue路由守卫之路由独享守卫
2019/09/25 Javascript
bootstrap-closable-tab可实现关闭的tab标签页插件
2020/08/09 Javascript
原生JavaScript实现轮播图
2021/01/10 Javascript
你所不知道的Python奇技淫巧13招【实用】
2016/12/14 Python
Windows下Python2与Python3两个版本共存的方法详解
2017/02/12 Python
基于Python数据可视化利器Matplotlib,绘图入门篇,Pyplot详解
2017/10/13 Python
python 筛选数据集中列中value长度大于20的数据集方法
2018/06/14 Python
解决在Python编辑器pycharm中程序run正常debug错误的问题
2019/01/17 Python
Python增强赋值和共享引用注意事项小结
2019/05/28 Python
解决django后台样式丢失,css资源加载失败的问题
2019/06/11 Python
解决pyecharts在jupyter notebook中使用报错问题
2020/04/23 Python
python的pstuil模块使用方法总结
2019/07/26 Python
djano一对一、多对多、分页实例代码
2019/08/16 Python
Python中os模块功能与用法详解
2020/02/26 Python
CSS3中文字镂空、透明值、阴影效果设置示例小结
2016/03/07 HTML / CSS
印度尼西亚在线时尚购物网站:ZALORA印尼
2016/08/02 全球购物
日本最佳原创设计品牌:Felissimo(芬理希梦)
2019/03/19 全球购物
宿舍保安职务说明书
2014/02/25 职场文书
预备党员转正考核材料
2014/06/03 职场文书
邀请书模板
2015/02/02 职场文书
离婚答辩状范文
2015/05/22 职场文书
学校运动会加油词
2015/07/18 职场文书
解决thinkphp6(tp6)在状态码500下不报错,或者显示错误“Malformed UTF-8 characters”的问题
2021/04/01 PHP
python实现简单反弹球游戏
2021/04/12 Python
Mysql8.0递归查询的简单用法示例
2021/08/04 MySQL
Python实现视频自动打码的示例代码
2022/04/08 Python
pt-archiver 主键自增
2022/04/26 MySQL
Python可视化神器pyecharts绘制地理图表
2022/07/07 Python