Question

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

我正在迭代所有<img>个代码，并使用我的isImageLoaded()函数进行检查。不幸的是，我的功能仅适用于Firefox和IE版本8。

我有什么建议可以让它在IE 9和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;
}

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

Answer 1

在我的网页的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只会在加载everthing后触发（包括所有其他资源，如javascript和css）。这个链接可能很有趣：

window.onload vs <body onload=""/>

因此，除非您在onload事件触发后将图像注入页面，否则上述内容应该会使您的函数变得有点冗余。但是，如果你想加快速度并且不必等待所有下载，你可以使用dom ready listener然后实现kennypu提到的方法：

Cross Browser Dom Ready

正如我所知，image.complete应该适用于所有现代浏览器：

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

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

1 个答案: