IE瀏覽器中圖片onload事件無效的解決方法
更新時間：2014年04月29日 10:22:24 作者：
在做一個項目的時候才發(fā)現(xiàn)的這個bug，其實這是一個很常見的問題，只是之前對圖片的處理太少，沒有碰到過。
故事模式實現(xiàn)是只加載當前瀏覽的照片和它下面的兩張照片，加載照片的時候才會加載和渲染評論區(qū)，圖片沒有加載前會用一個一象素的圖片占位，并用一個loading類將顯示出一個loading背景圖，判斷在可視區(qū)的時候替換成真正的圖片，圖片加載成功后刪除loading類。
問題出在最后面，測試的時候發(fā)現(xiàn)在IE下loading類無法刪除,當時代碼如下：
復制代碼 代碼如下:
img.src = _src;
img.src = _src;
img.onload = function(){
_con.delClass('loading');
}
網(wǎng)上找了一番，onload和定義src的語句應該換一下順序，IE從緩存中取圖片，onload根本不觸發(fā)，opera也有這個毛病，正確代碼修改如下
復制代碼 代碼如下:
img.onload = function(){
_con.delClass('loading');
};
img.src = _src;
立即就正常了
結(jié)論：應該把onload寫到src前面，先告訴瀏覽器圖片加載完要怎么處理，再讓它去加載圖片。 所以，不是IE瀏覽器不會觸發(fā)onload事件，而是因為加載緩沖區(qū)的速度太快，在沒有告訴它加載完要怎么辦時，它已經(jīng)加載完了。反過來說，firefox明顯更智能一些，加入onload事件后，firefox瀏覽器會檢測緩沖區(qū)是否已經(jīng)有此圖片，有的話直接就觸發(fā)此事件！
相關(guān)文章
這篇文章主要介紹了js實現(xiàn)顯示當前狀態(tài)的導航效果代碼,涉及javascript通過鼠標點擊事件動態(tài)改變頁面元素屬性的相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2015-08-08
這篇文章主要為大家詳細介紹了js+SVG實現(xiàn)動態(tài)時鐘效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-07-07
這篇文章主要給大家介紹了關(guān)于js高精度計算decimal.js庫用法的相關(guān)資料,decimal.js是使用的二進制來計算的,所以能解決js的精度問題,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-11-11
可能很多朋友認為undefined是在js中未定義變量時才會提示的錯誤,其實不然undefined 是js中的一特殊的變量,我們也可以提前定義哦,下面這篇文章主要給大家介紹了關(guān)于js中undefined該怎么判斷的相關(guān)資料,需要的朋友可以參考下2023-04-04
這篇文章主要介紹了微信小程序倒計時功能實例代碼,當單擊按鈕彈出一個半透明的彈出層，在規(guī)定時間內(nèi)激活關(guān)閉按鈕，關(guān)閉彈出層。需要的朋友可以參考下2018-07-07
JavaScript實現(xiàn)環(huán)繞鼠標旋轉(zhuǎn)效果
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)環(huán)繞鼠標旋轉(zhuǎn)效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-01-01
JS驗證IP，子網(wǎng)掩碼，網(wǎng)關(guān)和MAC的方法
這篇文章主要介紹了JS驗證IP，子網(wǎng)掩碼，網(wǎng)關(guān)和MAC的方法,涉及javascript正則表達式的相關(guān)使用技巧,需要的朋友可以參考下2015-07-07
NodeJs中的非阻塞方法介紹，需要的朋友可以參考下2012-06-06
javascript中導出與導入實現(xiàn)模塊化管理教程
這篇文章主要給大家介紹了關(guān)于javascript中導出與導入實現(xiàn)模塊化管理的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-12-12
閉包的功能強大，但如果沒有正確理解閉包的概念，其結(jié)果往往出乎人的意料。例如，下面是一個較常見的問題2009-03-03