如果/何时加载图像，则运行回调

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;
}