JavaScript：了解何时图像加载完成

Question

如果我有一个信标：

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

我希望有一个方法在信标请求完成后只被调用一次。类似如下的方法：

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

这可行吗？这可以用jQuery实现吗？

- Paul Tarjan

Answer 1

没问题。记住要在src属性之前添加load属性。

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

如果你在标记中定义了图像标签，那么当窗口加载事件触发时，你就必须确保图像已经被传输到了浏览器。

- redsquare

---

这给了我一个“url.indexOf不是函数”的错误... - LairdPleng

Answer 2

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

这种方法不总是有效，通常我会这样做：

$.fn.imageLoad = function(fn){
    this.on('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>

- Pim Jager

---

为什么要使用$(this).get(0).naturalWidth而不是this.naturalWidth？ - redsquare

@红色方块，说得好，我从来没有想过那个问题。（已更改，但未经测试（尽管它应该可以正常工作）） - Pim Jager

如果我没记错的话，$(this).get(0) 返回的是 DOM 元素，而不是 jQuery 对象。 - Joseph Yaduvanshi

是的，就像这个一样。 - redsquare

考虑将此返回放在imageLoad()的末尾，以便进行链式调用。 $('img.beacon').imageLoad(function() { /* 好 */ }).error(function() { /* 错误 */ }) - JasonSmith

Answer 3

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

- FerrousOxide

Answer 4

如果适合您，另一个选项是：当页面或图像加载完成后立即触发onload事件。

例如：

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

- lance

---

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

Answer 5

这里有一段简单的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代码必须在幕后完成相同的事情。

- a6hi5h3k

---

我不认为这是正确的方法，但是您可以自行检查......按照您的方式进行操作是完全错误的。您不使用事件绑定，这是事件处理的正确方式。 - Robert Koritnik

这绝对不适用于所有浏览器，这就是我在这里的原因。在Linux和Mac上的Chrome以及默认的Android浏览器中失败，实际上这是到目前为止我尝试过的每个浏览器。 - Nathan Schwermann

Answer 6

您可以用两种方式轻松完成它。让我们看看这两种方法：

1. 在标签中使用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标签完成此操作。

- Md. Hasan Mahmud

Answer 7

你可以使用onload事件，该事件在整个页面加载完成后触发。

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

- ichiban

---

正如你所提到的，这对于“所有事情”都是有好处的。但如果我们需要加载50个项目，并且图像是这50个项目中的第一个呢？我们不想等到其他49个项目也加载完成才开始执行某些操作。请注意，这包括样式表等。 - Long Huynh