追加圖時未觸發jQuery圖加載

Question

這類似於這個問題 ，但是不是兩次被load ，對我來說根本就沒有被load 。 根據對該問題的公認答案，我得到了這個jsbin ：

$('#goButton').click(function(e){
  $('#hello').empty();
  $('#hello').append($('<img />').attr({ 
    src: "http://www.vision-call.co.uk/images/stories/events/sample.jpg",
    onload: "alert('hello');"
  }));  
});


$('img').load(function() {
  alert("jquery");
});

我看到的是onload警報，但沒有jQuery load警報，有人可以解釋為什么會這樣嗎？ 如果我將HTML的img開頭，則效果很好，但是當我通過jQuery append添加img時卻沒有成功。 在我的“真實”邏輯中，我沒有定義javascript onload屬性，僅設置了jQuery load ，而我在此演示中的最初嘗試遵循了相同的邏輯，這是我理想中想要的。 我知道我可以將onload到一個函數，但是我寧願使用此事件處理程序。

我認為這很簡單，我很想念，但似乎其他人必須向我指出。

Answer 1

$（'img'）不存在。 您在單擊按鈕后添加了img，並且之前無法附加偵聽器。

$('#goButton').click(function(e){
  $('#hello').empty();
  var newImage = $('<img />').attr({ 
    src: "http://www.vision-call.co.uk/images/stories/events/sample.jpg",
    onload: "alert('hello');"
  }).on('load', function() {
    alert("jquery");
  });

  $('#hello').append(newImage);
});

固定演示： DEMO

Answer 2

如果您閱讀jQuery api，則此事件和圖像存在問題： http : //api.jquery.com/load-event/

它說的是：

與圖像一起使用時加載事件的警告

開發人員嘗試使用.load（）快捷方式解決的一個常見挑戰是，在完全加載圖像（或圖像集合）后執行函數。 有幾個已知的注意事項，應該注意。 這些是：

• 它不能始終如一地工作，也不可靠地跨瀏覽器
• 如果圖像src設置為與以前相同的src，則無法在WebKit中正確觸發
• 它無法正確冒泡DOM樹
• 可以停止為已經存在於瀏覽器緩存中的圖像觸發

Answer 3

您可能想嘗試promise並done

$('#goButton').click(function(e){
  $('#hello').empty();
  $('#hello').append($('<img />').attr({ 
    src: "http://www.vision-call.co.uk/images/stories/events/sample.jpg",
    onload: "alert('hello');"
  })).promise().done(function(){alert("jquery");});  
});

http://jsbin.com/zoxicapo/6/

Answer 4

已編輯

簡短測試/正在工作，似乎在多個平台上不一致。 需要進一步研究。

調用.load()時，您的img不存在。 但是，為什么不這樣做呢？

$('#goButton').click(function(e){
    $('#hello').empty();
    $('#hello').append($('<img />').attr({ 
        src: "http://www.vision-call.co.uk/images/stories/events/sample.jpg",
        onload: "loader()"
    }));  
});

var loader = function() {
    alert('hello');
}