IE中圖片的onload事件無效問題和解決方法
更新時間：2014年06月06日 11:33:23 作者：
這篇文章主要介紹了IE中圖片的onload事件無效問題和解決方法,這是一個很經(jīng)典的問題,其實(shí)只需要調(diào)換一下代碼順序即可解決,需要的朋友可以參考下
在web開發(fā)在獲取圖片寬高是很正常的事情，圖片在加載完成前是獲取不到圖片的寬高的，在加載完成后才可以獲取圖片本身的寬高，例如：
復(fù)制代碼 代碼如下:
var img = new Image();
img.src = "loading.gif";
img.onload = function(){
alert ( img.width );
};
OK?這段代碼看著沒什么問題，但在ie中會有一個bug，就是ie第一次打開的時候沒問題，第二次使用這個方法就悲劇了，ie沒反應(yīng)了，即使刷新頁面也是一樣。因?yàn)镮E會緩存圖片，第2次加載的圖片，不是從服務(wù)器上傳過來的，而是從緩沖區(qū)里加載的。
先寫onload方法，再指定這張圖片的URL，這樣就正常了。所以，不是IE沒有觸發(fā)onload事件，而是因?yàn)榧虞d緩沖區(qū)的速度太快，以至于沒有運(yùn)行到img.onload的時候，onload事件已經(jīng)觸發(fā)了。這樣就OK了。
復(fù)制代碼 代碼如下:
var img = new Image();
img.onload = function(){
alert ( img.width );
};
img.src = "loading.gif";
相關(guān)文章
JS中跨頁面調(diào)用變量和函數(shù)的方法(例如a.js 和 b.js中互相調(diào)用)
下面小編就為大家?guī)硪黄狫S中跨頁面調(diào)用變量和函數(shù)的方法(例如a.js 和 b.js中互相調(diào)用)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
JS電話號碼驗(yàn)證是比較常的一種驗(yàn)證，下邊給出一個JavaScript驗(yàn)證電話號碼的小例子。國內(nèi)固定電話都是七位或8位的數(shù)字組成的，還可以帶有長途的區(qū)號。2015-09-09
這篇文章主要為大家詳細(xì)介紹了js制作簡易計(jì)算器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
Swiper.js實(shí)現(xiàn)移動端元素左右滑動
這篇文章主要為大家詳細(xì)介紹了Swiper.js實(shí)現(xiàn)移動端元素左右滑動 ，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
荷蘭程序員Gabor de Mooij提出了一種比Object.create()更好的新方法，他稱這種方法為"極簡主義法"（minimalist approach）。下面通過本文給大家分享極簡主義法編寫JavaScript類的相關(guān)知識，一起看看吧2017-11-11
絕對經(jīng)典的滑輪新聞顯示(javascript+css)實(shí)現(xiàn)
這篇文章主要介紹了絕對經(jīng)典的滑輪新聞顯示(javascript+css)實(shí)現(xiàn),需要的朋友可以參考下2007-03-03
詳談js中window.location.search的用法和作用
下面小編就為大家?guī)硪黄斦刯s中window.location.search的用法和作用。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
這篇文章主要介紹了11個教程中不常被提及的JavaScript小技巧，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
現(xiàn)在網(wǎng)上最流行方法是John Resig在《Pro JavaScript techniques》提出的offset大法，累加元素offsetParent的offsetLeft和offsetTop一直到DOM的頂層。2010-01-01
javascript簡單判斷輸入內(nèi)容是否合法的方法
這篇文章主要介紹了javascript簡單判斷輸入內(nèi)容是否合法的方法,以驗(yàn)證用戶名是否為數(shù)字與字母組成為例,分析了javascript正則驗(yàn)證的思路與實(shí)現(xiàn)方法,需要的朋友可以參考下2016-05-05