如何使用Javascript检查图像是否已加载

Howto check if images have loaded using Javascript?

本文关键字：是否 加载 图像 检查 何使用 Javascript      更新时间：2023-09-26

在我的网页的OnLoad处理程序中，我试图检查是否所有图像都正确加载。

我在所有<img>标签上迭代，并用isImageLoaded()函数检查它们。不幸的是，我的功能只适用于Firefox和IE版本8。

有什么建议我可以让它在ie9和10工作吗?

function isImageLoaded(img) {
    // check for IE
    if (!img.complete) {
        return false;
    }
    // check for Firefox
    if (typeof img.naturalWidth != "undefined" && img.naturalWidth == 0) {
        return false;
    }
    // assume it's ok
    return true;
}

Update:事实证明，罪魁祸首是OnLoad可以在IE9+加载所有图像之前被触发。检查页面中图像的更好触发器是什么?我更喜欢一次检查它们，而不是单独的OnLoad/OnError处理程序。

在我的网页的OnLoad处理程序，我试图检查是否所有的图像已正确加载。

我假设你正在使用body.onload或<body onload=""> ?这仍然意味着所有的图像都被加载了—但是，通过使用:

window.addEventListener('load', function(){
  /// everything in the page has loaded now
});

或者对于旧版本的IE:

window.attachEvent('onload', function(){
  /// everything in the page has loaded now
});

你会得到一个更一致的行为跨浏览器，我知道一个事实，window.onload只会触发一旦一切已经加载(包括所有其他资源，如javascript和css然而)。这个链接可能会很有趣:

窗口。Onload vs

所以上面的代码应该会使你的函数有点冗余，除非你在onload事件触发后向页面注入图像。但是，如果您想加快速度，而不必等待所有下载，您可以使用dom就绪侦听器，然后实现kennypu提到的方法:

跨浏览器Dom就绪

作为一个补充说明，据我所知，image.complete应该适用于所有现代浏览器:

https://developer.mozilla.org/en-US/docs/DOM/HTMLImageElement

相关文章：