Question

这与此question相似，但不是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警报，有人可以解释为什么会这样吗？如果我开始使用img中的HTML，但是当我通过jQuery append添加onload时，它可以正常工作。在我的“真实”逻辑中，我没有定义javascript load属性，我只设置了jQuery onload，而我在此演示中的初始尝试遵循相同的逻辑，这是什么我理想的想要。我知道我可以将{{1}}挂钩到一个函数，但我宁愿使用这个事件处理程序。

我认为这是我想念的简单事情，但似乎有人必须向我指出。

Answer 1

$（'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

被修改

简要测试/正在运行，似乎在多个平台上不一致。需要进一步研究。

您致电img时.load()不存在。但是，为什么不做这样的事情？

$('#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');
}

Img附加时jQuery Img加载不触发

4 个答案: