JavaScript:了解图像何时完全加载

Question

如果我有一个灯塔:

<img src="http://example.com/beacon" />

我希望在信标请求完成后调用一个方法.就像是:

<script>
    $("img.beacon").load(function() {
        // do stuff knowing the beacon is done
    });
</script>

可能吗？它在jQuery中吗？

Answer 1

当然.请记住,需要在src属性之前添加负载.

$('<img />').load( function(){
  console.log('loaded');
}).attr('src', imgUrl);

如果您已在标记中定义了图像标记,那么当窗口加载事件触发时您就会卡住,以确保图像已经下降到线上.

Answer 2

$('img.beacon').load()

不会总是正常工作,通常我这样做:

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

上面的代码还包括在执行脚本之前图像已完成加载的情况.在标记中定义图像时可能会发生这种情况.

使用这样:

<img src='http://example.com/image.png' class='beacon' />
<script type='text/javascript'>
$(document).ready(function(){ //document.ready not really necessary in this case
   $('img.beacon').imageLoad(function(){
      //do stuff
   });
});
</script>