 |
|
茫茫網海中的冷日
發生過的事，不可能遺忘，只是想不起來而已！ |
|
|
恭喜您是本站第 1673015
位訪客!
登入 | 註冊
|
|
|
|
| 發表者 |
討論內容 |
冷日
(冷日) |
發表時間：2011/6/13 3:28 |
- Webmaster
- 註冊日: 2008/2/19
- 來自:
- 發表數: 15771
|
- [轉貼]解決IE中img.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失效的方法_记录_百度空间
|
|
|
討論串
|
[轉貼]JavaScript Image()對像屬性方法事件以及預裝載圖片 (冷日