改變它的src後，有沒有辦法綁定到圖像的load（）事件？

Question

我有一個圖像<img id='my_img' src='img1.png'>和一個按鈕。 單擊該按鈕執行以下操作：

$('#my_img').attr('src','img2.png') 

這第二圖像（img2.png）是相當大的，我想知道什麼時候是滿負荷（即.load（）事件）。 我試圖使用.live，.bind和.complete，但似乎沒有任何消息。

任何想法？

謝謝！ Amit

Answer 1

我認爲load事件只會觸發一次img標籤。但是，您可以輕鬆製作新圖像，並使用新的裝載處理程序加載該圖像。

var img = new Image(); 
img.onload = function() { 
    $('#my_img').attr('src', img.src); 
}; 
img.src = 'img2.png'; 

加載後，您可以在頁面上設置圖像的src，並且它會立即從瀏覽器緩存中取出。

Answer 2

你可以這樣做：

$('<img id="myimg" src="1.png" /><a href="" id="clickme">click</a>').appendTo('body'); 

$('#clickme').click(function() { 
    // replace the old img with a new one and define onLoad for the new img 
    var newImg = $('<img />') 
     .bind('load', function() { 
      alert('2nd img loaded'); 
     }) 
     .attr('src', '2.png'); 
    $('#myimg').replaceWith(newImg); 
    return false; 
});