解決IE6下背景圖片無法緩存的問題

 一。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從來不加分號的，以前是這樣，現在還是這樣，這樣的話怎麼進行壓縮呀，汗～下面的代碼按 照我的習慣都已加上分號，哪怕只有兩三句而已～)

程序代碼
windows.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?

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

轉至:http://hi.baidu.com/pplboy/blog/item/af40442604a193128b82a12a.html

(function(){

二。

(function(){   

try{

var userAgent = navigator.userAgent.toLowerCase();
var env = null;
var ver = 0;
env = userAgent.match(/msie ([\d.]+)/);

ver = env ? parseInt(env[1], 10) : 0;
if(ver == 6){
try{
document.execCommand("BackgroundImageCache", false, true);
}catch(e){}
}
}catch(e){}
})();

三。如何判斷瀏覽器的版本號

function Get_IE_Version()      {        var v;        if(navigator.userAgent.indexOf("MSIE 6.0")>0)//IE 6.0        {           v=6;        }         else if(navigator.userAgent.indexOf("MSIE 7.0")>0)//IE 7.0         {          v=7        }        else if(navigator.userAgent.indexOf("MSIE 8.0")>0)//IE 8.0        {          v=8;        }        return v;      } 

或者

通過userAgent獲取瀏覽器信息，主要獲取瀏覽器的類型和版本。 先通過判斷特有字符來判斷瀏覽器類型：  var b = {     msie: /msie/.test(ua) && !/opera/.test(ua),     opera: /opera/.test(ua),     safari: /webkit/.test(ua) && !/chrome/.test(ua),     firefox: /firefox/.test(ua),     chrome: /chrome/.test(ua) };  獲取版本信息就比較麻煩，有啊Browser的方法就比較巧妙(有修改)：  var vMark = ""; for (var i in b) {     if (b[i]) { vMark = "safari" == i ? "version" : i; break; } } b.version = vMark && RegExp("(?:" + vMark + ")[\\/: ]([\\d.]+)").test(ua) ? RegExp.$1 : "0";