javascript - 如果/当图像加载时运行回调

Question

我想知道查看图像的 height 属性是否是查看图像是否已加载的可靠方法。

假设我有一个图像的引用，如下所示:

var img = document.getElementById('myImg');

如果我想运行一些依赖于正在加载的图像的代码，我可以将其放入回调中，然后运行 ​​img.onload = myCallback;。

但是如果在这段代码运行之前图像已经加载，那么回调将不会执行。

这是一种可能的解决方案:

if (img.height && img.height > 0) {
    myCallback();
}
else {
    img.onload = myCallback;
}

换句话说:如果图像已经加载，则立即运行 myCallback，否则等到它加载完毕。

但我觉得这段代码可能很脆弱……它在所有情况下都能正常工作吗？有没有更安全或更优雅的方法来做到这一点？

Answer 1

您正在寻找 complete 属性。但是，我不认为这在所有 Firefox 版本中都能可靠地工作，因此最好添加您的高度检查作为备份:

if (img.complete) {
    myCallback();
} else if (img.height && img.height > 0) {
    myCallback();
} else {
    img.onload = myCallback;
}