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

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

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

我的简单解决方案，它不需要任何外部插件，对于常见情况应该足够了:

/**
 * Trigger a callback when the selected images are loaded:
 * @param {String} selector
 * @param {Function} callback
  */
var onImgLoad = function(selector, callback){
    $(selector).each(function(){
        if (this.complete || /*for IE 10-*/ $(this).height() > 0) {
            callback.apply(this);
        }
        else {
            $(this).on('load', function(){
                callback.apply(this);
            });
        }
    });
};

像这样使用它:

onImgLoad('img', function(){
    // do stuff
});

例如，要在你的图像加载淡出，你可以做:

$('img').hide();
onImgLoad('img', function(){
    $(this).fadeIn(700);
});

或者作为替代，如果你喜欢jquery插件类的方法:

/**
 * Trigger a callback when 'this' image is loaded:
 * @param {Function} callback
 */
(function($){
    $.fn.imgLoad = function(callback) {
        return this.each(function() {
            if (callback) {
                if (this.complete || /*for IE 10-*/ $(this).height() > 0) {
                    callback.apply(this);
                }
                else {
                    $(this).on('load', function(){
                        callback.apply(this);
                    });
                }
            }
        });
    };
})(jQuery);

并这样使用它:

$('img').imgLoad(function(){
    // do stuff
});

例如:

$('img').hide().imgLoad(function(){
    $(this).fadeIn(700);
});

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

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

如果你想要一个纯CSS的解决方案，这个技巧非常有效——使用transform对象。这也适用于图像缓存与否:

CSS:

.main_container{
    position: relative;
    width: 500px;
    height: 300px;
    background-color: #cccccc;
}

.center_horizontally{
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: green;
  left: 50%;
  top: 0;
  transform: translate(-50%,0);
}

.center_vertically{
  position: absolute;
  top: 50%;
  left: 0;
  width: 100px;
  height: 100px;
  background-color: blue;
  transform: translate(0,-50%);
}

.center{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  background-color: red;
  transform: translate(-50%,-50%);
}

HTML:

<div class="main_container">
  <div class="center_horizontally"></div>
  <div class="center_vertically"></div>
  <div class="center"></div>
  </div>
</div

Codepen例子

Codepen LESS的例子

对GUS示例的修改:

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

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

在onload之前和之后设置源。

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

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

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