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

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".

时间: 2024-10-22 03:15:38

IE图片缓存document.execCommand("BackgroundImageCache",false,true)_javascript技巧的相关文章

用javascript实现点击链接弹出"图片另存为"而不是直接打开_javascript技巧

<iframe height="0" width="0" src="/images/logo.gif" name="saveImage" id="saveImage"></iframe> <a href="###" onclick="saveImage.document.execCommand('saveAs');">Click M

js 获取、清空input type=&amp;quot;file&amp;quot;的值(示例代码)_javascript技巧

上传控件(<input type="file"/>)用于在客户端浏览并上传文件,用户选取的路径可以由value属性获取,但value属性是只读的,不能通过 javascript来赋值,这就使得不能通过value=""语句来清空它.很容易理解为什么只读,如果可以随意赋值的话,那么用户只要打开你的网页, 你就可以随心所欲的上传他电脑上的文件了. js 获取<intput type=file />的值 复制代码 代码如下: <html>

js parseInt(&amp;quot;08&amp;quot;)未指定进位制问题_javascript技巧

其中string为要转换的字符串,radix为二进制,八进制,十六进制或十进制. 在默认不指定radix时,当以0x开关时,为十六进制:如果以0开关且第二位不为x,则让为是八进制,(因为八进制不能有8,9所以报错返回0). 所以,在我们用时还是明确指定进位制,以防出错. 如我们平时都用十进制位,我们就 parseInt("08", 10);

javascript的动态加载、缓存、更新以及复用(一)_javascript技巧

使用范围: OA.MIS.ERP等信息管理类的项目,暂时不考虑网站. 遇到的问题: 完成一个项目,往往需要引用很多js文件,比如jQuery.js.easyUI等.还有自己写的一些列js文件,那么这些文件如何方便的加载,如果文件有变化如何才能让客户端及时更新缓存?如果能够提高点运行效率,那就更好了. 目标: 1.  可以方便的引用js文件. 2.  尽量使用各种缓存,避免频繁从服务器读取文件. 3.  如果js文件有更新或者增加.减少几个减少js文件,需要客户端能够自动.立刻更新. 4.  Js

ImageZoom 图片放大镜效果(多功能扩展篇)_javascript技巧

主要扩展了原图和显示框的展示模式,有以下几种模式: "follow" 跟随模式:显示框能跟随鼠标移动的效果: "handle" 拖柄模式:原图上有一个拖柄来标记显示范围: "cropper" 切割模式:原图用不透明的来标记显示范围,其他部分用半透明显示: "handle-cropper" 拖柄切割模式:拖柄模式和切割模式的混合版,同时用透明度和拖柄来标记显示范围. 当然更多的扩展等待你的想象力来发掘. 兼容:ie6/7/8,

图片轮换效果实现代码(点击按钮停止执行)_javascript技巧

在这个小程序中,需要把images文件夹下图片的命名设置为有顺序的,1.2.3-- 复制代码 代码如下: <script type="text/javascript"> var imgnumb = 1; function imgfor() { imgnumb++; document.getElementById('img1').setAttribute('src', 'images/' + imgnumb + '.jpg'); if (imgnumb == 5) { //共

图片无缝滚动代码(向左/向下/向上)_javascript技巧

想必大家都注意到<marquee>的不循环滚动,所以出现了很多替代脚本,或iframe或JS输出<marquee>,不管怎么做,都略显麻烦.下面说一下这个相对简单的实现思路:一个设定宽度并且隐藏超出它宽度的内容的容器demo,里面放demo1和 demo2,demo1是滚动内容,demo2为demo1的直接克隆,通过不断改变demo1的scrollTop或者scrollLeft达到滚动的目的,当滚动至demo1与demo2的交界处时直接跳回初始位置,因为demo1与demo2一样,

js对图片base64编码字符串进行解码并输出图像示例_javascript技巧

复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

JS实现图片的不间断连续滚动的简单实例_javascript技巧

js替代marquee实现图片无缝滚动 可能大家都碰到过,当marquee中滚动的是图片的时候,滚到终点的时候直接就跳回到起点了,而不像文字那样可以无缝滚动,下面介绍的是通过js来实现图片的无缝滚动. 先了解一下下面这几个属性: innerHTML: 设置或获取位于对象起始和结束标签内的 HTML scrollHeight: 获取对象的滚动高度. scrollLeft: 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop: 设置或获取位于对象最顶端和窗口中可见内容