在調(diào)試js時遇到一些惡心的問題，于是做了一個測試程序，放到網(wǎng)上讓大家?guī)臀覝y試。帖子見http://vchelp.net/cndevforum/subject_view.asp?page=-1&subject_id=165791

下面我給出關(guān)于測試的解釋：

起因源于我想做這么一個網(wǎng)頁：用戶上傳一個圖片后，如果圖片大于500象素，則在客戶端把圖片縮小成500象素大小。但是不想讓用戶看到這個大小調(diào)整過程。于是想首先隱藏這個圖片，在整個網(wǎng)頁下載完成后，調(diào)整大小，然后再顯示調(diào)整好的圖像。

于是我首先設(shè)置img標(biāo)簽的style="display:none",然后在window.onload中獲取原圖大小，進(jìn)行調(diào)整。
<img src="http:......" style="display:none" id="c010_jpg">

結(jié)果發(fā)現(xiàn)firefox下，一個disolay=none的圖像width和height是原圖的實際大小，但是ie下卻都是0

于是想到穩(wěn)妥的辦法是建立一個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)，上面的代碼會輸出“0,0”
我懷疑這說明當(dāng)ie解析一個display:none的img標(biāo)簽時，并沒有下載這個圖片，所以上面的代碼對oImg.src賦值后ie需要從目標(biāo)地址下載這個圖片，當(dāng)然，這個過程是異步的過程
而在firefox下，上面的代碼會輸出正確的信息，這說明firefox解析display:none的圖片時，已經(jīng)下載了這個圖片。以后再對oImg.src賦值時，直接從緩存中獲取，所以速度快

想到這一點我只好用更復(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實現(xiàn)了complete屬性，而ie實現(xiàn)了complete屬性和readyState屬性

但是兩者對屬性的定義好像不同：
firefox： 一個圖像被下載完畢，complete屬性就是true，沒有下載完畢則為false
ie：一個圖像沒有被下載完畢，則readyState屬性為uninitialized,complete屬性是false.當(dāng)下載完畢時， readyState為complete，而如果此時圖片還沒有顯示，complete為false,顯示以后(display:block)此屬性才變成true

沒想到一個簡單的功能竟然這么費(fèi)勁，瀏覽器的兼容問題很難順利解決，特別是很多細(xì)節(jié)非常浪費(fèi)時間，希望別人遇到這些問題時還是多考慮從服務(wù)端腳本中解決這些問題。從而繞過對瀏覽器兼容的復(fù)雜測試。


另外我還非常疑惑，為什么現(xiàn)實中的ie對于onload事件，大部分不是異步的，只有少數(shù)同志的ie對于此事件是異步的。

最新評論