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)文章
Util.js文件包含了一些工具函數(shù)，來幫助人們使用JavaScript數(shù)據(jù)（例如從服務(wù)器返回的數(shù)據(jù)）來更新Web頁面。有需要的小伙伴可以參考下2015-06-06
STL是一種用于表示3D模型表面的文件格式,通常由三角形面片組成,STL 文件可以是ASCII（文本）或二進制格式,其中二進制格式更為常見,因為它更緊湊且加載速度更快,本文給大家介紹了javascript加載導出 STL文件的示例,需要的朋友可以參考下2024-12-12
麥雞的TAB切換功能代碼2008-10-10
這篇文章主要介紹了JS煙花背景效果實現(xiàn)方法,實例分析了javascript操作dom元素實現(xiàn)煙花特效的技巧,需要的朋友可以參考下2015-03-03
梳理總結(jié)JavaScript的23個String方法
文章主要介紹了梳理總結(jié)JavaScript的23個String方法,JavaScript?中的String類型用于表示文本型的數(shù)據(jù)。它是由無符號整數(shù)值作為元素而組成的集合,更多詳細內(nèi)容需要的朋友可以參考一下2022-07-07
console.log()、alert()?都是JavaScript中用于在開發(fā)過程中輸出信息或向用戶顯示消息的不同方法,它們的主要區(qū)別在于目的、使用場景以及展示方式,本文將給大家介紹JavaScript?中怎么看數(shù)據(jù)返回值,需要的朋友可以參考下2024-07-07
平常設(shè)計表單的時候，我們會加入一些提示文字，最常見的做法是利用value來設(shè)置，下面與大家分享一個實例，感興趣的朋友可以參考下哈2013-06-06
一文秒懂JavaScript構(gòu)造函數(shù)、實例、原型對象以及原型鏈
這篇文章主要介紹了一文秒懂JavaScript構(gòu)造函數(shù)、實例、原型對象以及原型鏈的相關(guān)知識，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-08-08
javascript高級模塊化require.js的具體使用方法
本篇文章主要介紹了javascript高級模塊化require.js的具體使用方法，非常具有實用價值，需要的朋友可以參考下2017-10-10
JavaScript實時監(jiān)聽localStorage變化的實現(xiàn)方法小結(jié)
很多時候,我們在A頁面通過點擊之類的操作獲得一個數(shù)值,然后拿到B頁面使用,我們希望這個值是響應式的,當然你可以使用vue或者react的實現(xiàn),這篇文章適合想偷懶或者很多后端小伙不愿意去用的使用,效果是差不多的主要是適用于任何基于JavaScript的項目,需要的朋友可以參考下2024-06-06