javascript - 静态图像的图像加载

Question

我知道要使图像 onload 正常工作，您必须在附加 onload 处理程序后设置 src。但是我想将 onload 处理程序附加到我的 HTML 中的静态图像。现在我通过以下方式(使用 jQquery)做到这一点:

<img id='img1' src='picture.jpg'>

$('#img1').load( function() {
 alert('foo');
})
.attr('src', $('img1').attr('src'));

但这相当丑陋，并且有明显的流程，它只能为只匹配一张图像的选择器完成。还有其他更好的方法吗？

编辑
我的意思是它只能为只匹配一张图像的选择器完成是在这样做时:

<img class='img1' src='picture.jpg'>
<img class='img1' src='picture2.jpg'>

$('.img1').load( function() {
 alert('foo');
})
.attr('src', $('.img1').attr('src'));

两张图片都有 src='picture.jpg'

Answer 1

您可以通过调用 .trigger() 或 .load() 直接触发事件(或其处理程序)。

如果你知道你想要事件，因为你知道图像已经加载，那么你可以这样做:

$('#img1').load(function() {
    alert('foo');
  })
  .trigger('load');  // fires the load event on the image

如果您在文档准备就绪时运行脚本，或者在不清楚图像是否存在的某个时刻运行脚本，那么我会使用类似这样的方法:

$('img.static')
  .load(function(){
    alert('foo');
    return false; // cancel event bubble
  })
  .each(function(){
    // trigger events for images that have loaded,
    // other images will trigger the event once they load
    if ( this.complete && this.naturalWidth !== 0 ) {
      $( this ).trigger('load');
    }
  });

请注意加载事件冒泡 (jQuery 1.3)，如果您不取消 img 处理程序中的冒泡，您可能会过早地触发文档上的加载处理程序。

备案:很遗憾，img.src=img.src 触发解决方案无法在 Safari 上正常工作。您需要将 src 设置为其他内容(例如 # 或 about:blank)，然后返回以进行重新加载。