Question

所以我有一个链接.button，可以将图像添加到div #container onclick。

$(".button").click(function(e) {
  $('#container').prepend("<img src='http://24.media.tumblr.com/tumblr_ma4oz49mAq1r2cisro1_1280.png'>");
  $('#container').load(function(){
    alert('Finished Loading!');
  });
  e.preventDefault();
});

图像加载后，会触发一条消息。至少这是我期望它做的。尽管如此，它并没有这样做。当我将#container *放在load（）函数上时，它确实如此。 jQuery文档说它适用于元素及其子元素。那我在这里错过了什么？

这是一个fiddle。您可以在load（）的选择器中添加一个星号，以查看它是否适用于它。我也试过附加iframe而不是图像，同样的事情发生了。请注意，我计划稍后将ajax内容添加到其中，然后使用图像进行测试。

我做错了什么还是？

Answer 1

您需要绑定图像对象的加载而不是容器。试试这个：

$(".button").click(function(e) {
  $('#container').prepend("<img src='http://24.media.tumblr.com/tumblr_ma4oz49mAq1r2cisro1_1280.png' class='tst'>");
    $('.tst').load(function(){
      alert('Finished Loading!');
    });
  e.preventDefault();
});

<强> working Demo

Answer 2

 $(".button").click(function(e) {
  $('#container').prepend("<img src='http://24.media.tumblr.com/tumblr_ma4oz49mAq1r2cisro1_1280.png' id='test'>");
    $('#test').load(function(){
      alert('Finished Loading!');
    });
  e.preventDefault();
});

Answer 3

将图像加载到文档就绪并隐藏图像。按钮点击显示图像

$('#container').prepend("<img src='http://24.media.tumblr.com/tumblr_ma4oz49mAq1r2cisro1_1280.png'>");
$('#container img').hide();

$(".button").click(function(e) {
     $('#container img').show();
        $('#container').load(function(){
          alert('Finished Loading!');
        });
      e.preventDefault();
    });

Answer 4

要从图像中可靠地获取load事件，您必须：

将load事件绑定在图片上，而不是容器上，
在设置img的{{1}}财产之前执行。

所以：Updated Fiddle

src

如果在绑定$(".button").click(function(e) { $("<img>") .load(function(){ alert('Finished Loading!'); }) .attr("src", "http://24.media.tumblr.com/tumblr_ma4oz49mAq1r2cisro1_1280.png") .addClass("tst") .prependTo("#container"); e.preventDefault(); });事件之前在图像上设置src，并且图像已缓存，则可能会在某些浏览器上完全错过该事件。通过确保在设置load之前将事件挂钩，您知道，您将不会错过它。

Answer 5

试试这个

$(".button").click(function(e) {
  $('#container').prepend("<img src='http://24.media.tumblr.com/tumblr_ma4oz49mAq1r2cisro1_1280.png' id='testimg'>");
  //$('#testimg').load(function(){
    $('#container').load('Load', '#testimg', function () { 
    alert('Finished load!');
  }



  );
  e.preventDefault();
});

jQuery .load（）无法正常工作（？）

5 个答案: