我想做的是:

$("img").bind('load', function() {
  // do stuff
});

但是当图像从缓存中加载时,load事件不会触发。jQuery文档建议用一个插件来解决这个问题,但它不起作用


当前回答

通过使用jQuery生成带有图像src的新图像,并将load方法直接分配给它,当jQuery生成新图像时,load方法将被成功调用。这是为我工作在IE 8, 9和10

$('<img />', {
    "src": $("#img").attr("src")
}).load(function(){
    // Do something
});

其他回答

我找到了一个解决方案https://bugs.chromium.org/p/chromium/issues/detail?id=7731#c12 (此代码直接取自注释)

var photo = document.getElementById('image_id');
var img = new Image();
img.addEventListener('load', myFunction, false);
img.src = 'http://newimgsource.jpg';
photo.src = img.src;

通过使用jQuery生成带有图像src的新图像,并将load方法直接分配给它,当jQuery生成新图像时,load方法将被成功调用。这是为我工作在IE 8, 9和10

$('<img />', {
    "src": $("#img").attr("src")
}).load(function(){
    // Do something
});

只需要在img对象定义后的另一行中重新添加src参数。这将欺骗IE触发lad事件。它很丑,但这是我迄今为止发现的最简单的解决方法。

jQuery('<img/>', {
    src: url,
    id: 'whatever'
})
.load(function() {
})
.appendTo('#someelement');
$('#whatever').attr('src', url); // trigger .load on IE

你也可以使用这段代码来支持加载错误:

$("img").on('load', function() {
  // do stuff on success
})
.on('error', function() {
  // do stuff on smth wrong (error 404, etc.)
})
.each(function() {
    if(this.complete) {
      $(this).load();
    } else if(this.error) {
      $(this).error();
    }
});

对GUS示例的修改:

$(document).ready(function() {
    var tmpImg = new Image() ;
    tmpImg.onload = function() {
        // Run onload code.
    } ;

tmpImg.src = $('#img').attr('src');
})

在onload之前和之后设置源。