6

在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 处理程序。

4

1 回答 1

1

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

我假设您正在使用body.onloador <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）。这个链接可能很有趣：

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

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

跨浏览器 Dom 就绪

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

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

于 2013-03-20T08:31:31.740 回答