DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript基礎知識 >> ie和firefox中img對象區別的困惑
ie和firefox中img對象區別的困惑
編輯:JavaScript基礎知識     

在調試js時遇到一些惡心的問題,於是做了一個測試程序,放到網上讓大家幫我測試。帖子見http://vchelp.net/cndevforum/subject_view.asp?page=-1&subject_id=165791

下面我給出關於測試的解釋:

起因源於我想做這麼一個網頁:用戶上傳一個圖片後,如果圖片大於500象素,則在客戶端把圖片縮小成500象素大小。但是不想讓用戶看到這個大小調整過程。於是想首先隱藏這個圖片,在整個網頁下載完成後,調整大小,然後再顯示調整好的圖像。

於是我首先設置img標簽的style="display:none",然後在window.onload中獲取原圖大小,進行調整。
<img src="http:......" style="display:none" id="c010_jpg">

結果發現firefox下,一個disolay=none的圖像width和height是原圖的實際大小,但是ie下卻都是0

於是想到穩妥的辦法是建立一個image對象,然後對src賦值,進而讀取原圖大小的信息:
var oImg = new Image();
oImg.src = docunent.getElementById("c010_jpg").src;
//馬上讀取oImg的width和height
alert([oImg.width, oImg.height]);

結果在ie測試發現,上面的代碼會輸出“0,0”
我懷疑這說明當ie解析一個display:none的img標簽時,並沒有下載這個圖片,所以上面的代碼對oImg.src賦值後ie需要從目標地址下載這個圖片,當然,這個過程是異步的過程
而在firefox下,上面的代碼會輸出正確的信息,這說明firefox解析display:none的圖片時,已經下載了這個圖片。以後再對oImg.src賦值時,直接從緩存中獲取,所以速度快

想到這一點我只好用更復雜更穩妥的辦法了:
var oImg = new Image();
oImg.onload = function (){alert([oImg.width, oImg.height]);}
oImg.src = docunent.getElementById("c010_jpg").src;
//當src被載入後,輸出oImg的寬和高

使用事件和回調函數是沒辦法的事情。處理這種異步過程使程序結構變得很難看。

另外,在w3c中( http://www.w3.org/TR/REC-DOM-Level-1/idl-definitions.html)沒有找到HTMLImageElement的readyState和complete屬性,
發現firefox實現了complete屬性,而ie實現了complete屬性和readyState屬性

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

沒想到一個簡單的功能竟然這麼費勁,浏覽器的兼容問題很難順利解決,特別是很多細節非常浪費時間,希望別人遇到這些問題時還是多考慮從服務端腳本中解決這些問題。從而繞過對浏覽器兼容的復雜測試。


另外我還非常疑惑,為什麼現實中的ie對於onload事件,大部分不是異步的,只有少數同志的ie對於此事件是異步的。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved