JavaScript：知道图像何时完全加载答案

【问题标题】：JavaScript: Know when an image is fully loadedJavaScript：知道图像何时完全加载
【发布时间】：2010-11-18 10:44:31
【问题描述】：

如果我有信标：

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

我希望在信标请求完成后调用一个方法。比如：

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

有可能吗？是在 jQuery 中吗？

【问题讨论】：

标签： javascript jquery image

【解决方案1】：

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

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

如果您在标记中定义了图像标签，那么您会在窗口加载事件触发时卡住，以确保图像已通过网络传输。

【讨论】：

【解决方案2】：

另一个选项，如果它适合您：onload event 在页面或图像加载后立即出现。

如：

<img ... onload="alert('test');" />

【讨论】：

但它的 jQuery，不显眼。内联 js 事件是不可以的

【解决方案3】：

$('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>

【讨论】：

为什么是 $(this).get(0).naturalWidth 而不是 this.naturalWidth？
@redsquare，好点子，从来没有想过。（已更改，但未经测试（尽管它应该可以正常工作））
如果我没记错的话，$(this).get(0) 返回的是 DOM 元素，而不是 jQuery 对象
是的，和这个一样
考虑在 imageLoad() 结束时返回这个，以便你可以链接。 $('img.beacon').imageLoad(function() { /* good */ }).error(function() { /* bad */ })

【解决方案4】：

您可以使用在整个页面加载完成时触发的onload 事件。

$(window).load(function(){
  //everything is loaded
});

【讨论】：

正如您所提到的，这对everything 有好处。如果我们要加载 50 个项目并且图像是 50 个中的第一个怎么办？我们不想等到所有其他 49 个项目也加载完成后再做某事。另请注意，这包括样式表等。

【解决方案5】：

<script type="text/javascript">
    $().ready(function() {
        $('img#beacon').attr('src', 'http://sstatic.net/so/img/so/logo.png')
            .load(function() { alert('Image Loaded'); })
            .error(function() { alert('Error Loading Image');
        });
    });
</script>

这将加载 StackOverflow 徽标。

如果加载成功，则执行alert('Image Loaded');。
如果失败，则执行alert('Error Loading Image');。

当然，其中任何一个都可以替换为您自己的函数。作为一个新用户，它拒绝了我的图片标签，但图片标签应该只包含id='beacon' 属性。除非你想添加一个类。我们在此处的代码中设置src 属性，通常您正在监视完成的图像具有src 值，无论如何都是以编程方式设置的。

【讨论】：

【解决方案6】：

这是一个适用于所有浏览器的简单 javascript 代码：

var myImage = new Image();

myImage.onload = function() {
    var image_width = myImage.width;
    var image_height = myImage.height;
    $('#pictureEl').html('<img width="'+ image_width +'" height="'+ image_height +'" src='+ myImage.src + '></img>');           
};

myImage.src = myUrl;

jQuery sn-p 必须在底层做同样的事情。

【讨论】：

我不认为它是这样做的，但是您可以自己检查一下...按照您的方式进行操作是完全错误的。您不使用事件绑定是正确的事件处理方式。
这绝对不适用于所有浏览器，这就是我在这里的原因。在 chrome 和 linux 和 mac 以及默认的 android 浏览器上都失败了，这实际上是我迄今为止尝试过的所有浏览器。

【解决方案7】：

您可以通过两种方式轻松完成。让我们看看方式：

1.在img标签中使用onload属性：

<img onload="alert('loaded');" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">

这将在照片加载完成后触发警报。

2.在JavaScript中使用EventListener：

document.getElementsByTagName("img");.addEventListener("load", function loaded(){
  //any code you may need
  });

这些代码位于您的外部js 文件或内部脚本标记中。

您可以使用class 和id 属性对每个img 标记执行此操作。

【讨论】：