我想做的是:

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

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


当前回答

你真的必须用jQuery来做吗?你也可以将onload事件直接附加到你的图像上;

<img src="/path/to/image.jpg" onload="doStuff(this);" />

它将在每次图像加载时触发,无论是否从缓存中加载。

其他回答

我自己也有这个问题,到处寻找一个解决方案,不涉及杀死我的缓存或下载插件。

我没有立即看到这个帖子,所以我发现了一些其他的东西,这是一个有趣的修复,(我认为)值得张贴在这里:

$('.image').load(function(){
    // stuff
}).attr('src', 'new_src');

实际上,我从这里的评论中得到了这个想法:http://www.witheringtree.com/2009/05/image-load-event-binding-with-ie-using-jquery/

我不知道为什么它能工作,但我已经在IE7上测试了这个,在它现在工作之前它在哪里坏了。

希望能有所帮助,

Edit

公认的答案实际上解释了原因:

如果src已经设置,那么在绑定事件处理程序之前,事件就会在缓存中触发。

对GUS示例的修改:

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

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

在onload之前和之后设置源。

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

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

我有这个问题与IE的e.target.width将是未定义。加载事件会发生,但我无法在IE中获得图像的尺寸(chrome + FF工作)。

结果你需要寻找e.currentTarget.naturalWidth & e.currentTarget.naturalHeight。

再说一次,IE有自己的(更复杂的)做事方式。

你真的必须用jQuery来做吗?你也可以将onload事件直接附加到你的图像上;

<img src="/path/to/image.jpg" onload="doStuff(this);" />

它将在每次图像加载时触发,无论是否从缓存中加载。