javascript 加载图像时运行回调

ymzxtsji 于 2023-01-11 发布在 Java

关注(0)|答案(1)|浏览(155)

我想知道查看图像的height属性是否是查看它是否已经加载的可靠方法。
假设我有一个对图像的引用，如下所示：

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

如果我想运行一些依赖于加载的图像的代码，我可以将其放在回调函数中，然后运行img.onload = myCallback;。
但是如果在这段代码运行之前已经加载了图像，那么回调就不会执行。
这是一个可能的解决方案：

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

换句话说：运行myCallback现在如果这映像已经被载入，否则等待直到它被载入.
但是我有一种感觉，这段代码可能很脆弱......它在所有情况下都能工作吗？有没有更安全或更优雅的方法来做到这一点？

1条答案

你正在寻找complete属性，但是我不认为它在所有Firefox版本中都能可靠地工作，所以最好添加身高检查作为备份：

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