IE8瀏覽器中Image物件onload失效的解決辦法
作為WEB設計者,為了在網頁展示上加強使用者體驗,經常會利用圖象載入顯示狀態方法,這自然需要Image物件的onload事件。 在firefox瀏覽器下完成開發後,可是在IE瀏覽器中進行除錯總不能被呼叫。不管是最新版的IE8還是舊版本的IE7和IE6都無效,最初的程式碼簡化後如下:
var img = new Image();
img.src = "test.gif";
img.onload = function(){
alert(this.src);
//other
};
簡單看過以後貌似這段程式碼沒有什麼問題,可是IE下就不是能正常的執行。不管怎麼檢測,IE根本不會理會,不過還是找到了解決的方法,原理如下:
圖片下載時,瀏覽器會把圖片快取起來,再次載入此圖片時就會從緩衝區里加載。
那麼如果圖片已經在快取區了,是不是從緩衝區里加載的圖片就不觸發onload事件呢?
測試……
var img = new Image();
img.onload = function(){
alert(this.src);
//other
};
img.src = "test.gif";
測試成功!
結論:應該把onload寫到src前面,先告訴瀏覽器圖片載入完要怎麼處理,再讓它去載入圖片。 所以,不是IE瀏覽器不會觸發onload事件,而是因為載入緩衝區的速度太快,在沒有告訴它載入完要怎麼辦時,它已經載入完了。反過來說,firefox明顯更智慧一些,加入onload事件後,firefox瀏覽器會檢測緩衝區是否已經有此圖片,有的話直接就觸發此事件!