對這文章發表回應
發表限制: 非會員 可以發表
發表者： 冷日 發表時間： 2011/6/13 3:28:06
解決IE中img.onload失效的方法
2011-02-25 16:08
最近在做一個web項目，其中有一個需求：在服務端圖片未下載完成之前顯示另一個圖片，下載完成後才顯示此圖片，所以想到了img的onload方法，開發完成後，在firefox瀏覽器下沒有什麼問題，在IE下測試，發現img的onload事件很多情況下都不被調用。
我最初的代碼如下：
這段代碼看上去沒什麼問題，但是為什麼onload在ie下經常沒有被調用呢？因為瀏覽器會緩存圖片，第2次加載的圖片，不是從服務器上傳過來的，瀏覽器不會向服務端發送請求，而是從緩衝區裡加載的。是不是從緩衝區裡加載的圖片就不觸發onload事件呢？但alert每次都是執行的，所以猜測是錯誤的，於是我把代碼做了一下修改如下
我把onload事件寫到給imgage對象的src賦值之前了，先告訴瀏覽器如何處理這張圖片，再指定這張圖片的源，這樣就正常了。所以，不是IE瀏覽器沒有觸發onload事件，而是因為加載緩衝區的速度太快了，以至於沒有運行到obj.onload的時候，onload事件已經觸發了。
原文出處：解决IE中img.onload失效的方法_记录_百度空间
2011-02-25 16:08
最近在做一個web項目，其中有一個需求：在服務端圖片未下載完成之前顯示另一個圖片，下載完成後才顯示此圖片，所以想到了img的onload方法，開發完成後，在firefox瀏覽器下沒有什麼問題，在IE下測試，發現img的onload事件很多情況下都不被調用。
我最初的代碼如下：
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
var obj = new Image();
obj.src = "http://dl.zhishi.sina.com.cn/upload/21/01/14/1172210114.4452029.jpg";
obj.onload = function()
{
$("img").attr('src',this.src);
alert(this.src);
}
</script>
<div id="mypic"><img src="../images/loading.gif" /></div>
這段代碼看上去沒什麼問題，但是為什麼onload在ie下經常沒有被調用呢？因為瀏覽器會緩存圖片，第2次加載的圖片，不是從服務器上傳過來的，瀏覽器不會向服務端發送請求，而是從緩衝區裡加載的。是不是從緩衝區裡加載的圖片就不觸發onload事件呢？但alert每次都是執行的，所以猜測是錯誤的，於是我把代碼做了一下修改如下
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
var obj = new Image();
obj.onload = function()
{
$("img").attr('src',this.src);
alert(this.src);
}
obj.src = "http://dl.zhishi.sina.com.cn/upload/21/01/14/1172210114.4452029.jpg";
</script>
<div id="mypic"><img src="../images/loading.gif" /></div>
我把onload事件寫到給imgage對象的src賦值之前了，先告訴瀏覽器如何處理這張圖片，再指定這張圖片的源，這樣就正常了。所以，不是IE瀏覽器沒有觸發onload事件，而是因為加載緩衝區的速度太快了，以至於沒有運行到obj.onload的時候，onload事件已經觸發了。
原文出處：解决IE中img.onload失效的方法_记录_百度空间