我想做的是:

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

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


当前回答

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

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

$('.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之前和之后设置源。

如果你想这样做,我可以给你一个小建议:

<div style="position:relative;width:100px;height:100px">
     <img src="loading.jpg" style='position:absolute;width:100px;height:100px;z-index:0'/>
     <img onLoad="$(this).fadeIn('normal').siblings('img').fadeOut('normal')" src="picture.jpg" style="display:none;position:absolute;width:100px;height:100px;z-index:1"/>
</div>

如果你在浏览器缓存图片时这样做,总是显示img没有问题,但在真实图片下加载img。

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

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

$('.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已经设置,那么在绑定事件处理程序之前,事件就会在缓存中触发。

如果src已经设置,则在绑定事件处理程序之前,事件就会在缓存的情况下触发。为了解决这个问题,你可以循环检查和触发基于.complete的事件,就像这样:

$("img").one("load", function() {
  // do stuff
}).each(function() {
  if(this.complete) {
      $(this).load(); // For jQuery < 3.0 
      // $(this).trigger('load'); // For jQuery >= 3.0 
  }
});

注意从.bind()到.one()的变化,因此事件处理程序不会运行两次。

你可以使用JAIL插件来解决这个问题,它还允许你延迟加载图像(提高页面性能)并将回调作为参数传递

$('img').asynchImageLoader({callback : function(){...}});

HTML应该是这样的

<img name="/global/images/sample1.jpg" src="/global/images/blank.gif" width="width" height="height" />