在調(diào)試js時(shí)遇到一些惡心的問題,于是做了一個(gè)測試程序,放到網(wǎng)上讓大家?guī)臀覝y試。帖子見<img src="http:......" style="display:none" id="c010_jpg">
結(jié)果發(fā)現(xiàn)firefox下,一個(gè)disolay=none的圖像width和height是原圖的實(shí)際大小,但是ie下卻都是0
于是想到穩(wěn)妥的辦法是建立一個(gè)image對象,然后對src賦值,進(jìn)而讀取原圖大小的信息:
var oImg = new Image();
oImg.src = docunent.getElementById("c010_jpg").src;
//馬上讀取oImg的width和height
alert([oImg.width, oImg.height]);
結(jié)果在ie測試發(fā)現(xiàn),上面的代碼會(huì)輸出“0,0”
我懷疑這說明當(dāng)ie解析一個(gè)display:none的img標(biāo)簽時(shí),并沒有下載這個(gè)圖片,所以上面的代碼對oImg.src賦值后ie需要從目標(biāo)地址下載這個(gè)圖片,當(dāng)然,這個(gè)過程是異步的過程
而在firefox下,上面的代碼會(huì)輸出正確的信息,這說明firefox解析display:none的圖片時(shí),已經(jīng)下載了這個(gè)圖片。以后再對oImg.src賦值時(shí),直接從緩存中獲取,所以速度快
想到這一點(diǎn)我只好用更復(fù)雜更穩(wěn)妥的辦法了:
var oImg = new Image();
oImg.onload = function (){alert([oImg.width, oImg.height]);}
oImg.src = docunent.getElementById("c010_jpg").src;
//當(dāng)src被載入后,輸出oImg的寬和高
使用事件和回調(diào)函數(shù)是沒辦法的事情。處理這種異步過程使程序結(jié)構(gòu)變得很難看。
另外,在w3c中( http://www.w3.org/TR/REC-DOM-Level-1/idl-definitions.html)沒有找到HTMLImageElement的readyState和complete屬性,
發(fā)現(xiàn)firefox實(shí)現(xiàn)了complete屬性,而ie實(shí)現(xiàn)了complete屬性和readyState屬性
但是兩者對屬性的定義好像不同:
firefox: 一個(gè)圖像被下載完畢,complete屬性就是true,沒有下載完畢則為false
ie:一個(gè)圖像沒有被下載完畢,則readyState屬性為uninitialized,complete屬性是false.當(dāng)下載完畢時(shí), readyState為complete,而如果此時(shí)圖片還沒有顯示,complete為false,顯示以后(display:block)此屬性才變成true
沒想到一個(gè)簡單的功能竟然這么費(fèi)勁,瀏覽器的兼容問題很難順利解決,特別是很多細(xì)節(jié)非常浪費(fèi)時(shí)間,希望別人遇到這些問題時(shí)還是多考慮從服務(wù)端腳本中解決這些問題。從而繞過對瀏覽器兼容的復(fù)雜測試。
另外我還非常疑惑,為什么現(xiàn)實(shí)中的ie對于onload事件,大部分不是異步的,只有少數(shù)同志的ie對于此事件是異步的。
新聞熱點(diǎn)
疑難解答
網(wǎng)友關(guān)注