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），然后返回以进行重新加载。

Answer 2

好的，我把Borgars的答案变成了一个插件，在这里：

$.fn.imageLoad = function(fn){
    this.load(fn);
    this.each( function() {
        if ( this.complete && this.naturalWidth !== 0 ) {
            $(this).trigger('load');
        }
    });
}

Answer 3

我想这真是一个关于jQuery选择器的问题。如果您想匹配所有图片元素，则可以使用img代替#img1作为选择器。

Answer 4

将类添加到您想要此功能的图像中，并在jQuery选择器中使用该类。

$('.static-image').load( function(){ ... } );

静态图像的图像onload

4 个答案: