茫茫網海中的冷日
         
茫茫網海中的冷日
發生過的事,不可能遺忘,只是想不起來而已!
 恭喜您是本站第 1704350 位訪客!  登入  | 註冊
主選單

Google 自訂搜尋

Goole 廣告

隨機相片
PIMG_00414.jpg

授權條款

使用者登入
使用者名稱:

密碼:


忘了密碼?

現在就註冊!

網頁設計 : [轉貼]JavaScript Image()對像屬性方法事件以及預裝載圖片

發表者 討論內容
冷日
(冷日)
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失效的方法_记录_百度空间
前一個主題 | 下一個主題 | | | |

討論串




Powered by XOOPS 2.0 © 2001-2008 The XOOPS Project|