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

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

HTML应该是这样的

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

如果你想要一个纯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的例子

如果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()的变化，因此事件处理程序不会运行两次。

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

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

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

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

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

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

<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。