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

在我的网页的OnLoad处理程序中，我试图检查所有图像是否已正确加载。如何检查图像是否使用Javascript加载？

我遍历所有<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处理程序。

来源

2013-03-20 Gene Vincent

感谢sdespont！我试图避免使用库来保持页面大小。 – 2013-03-20 08:13:48

您是否尝试简单地为每个图像添加一个'onload'事件处理程序并计算它们触发了多少次？ – 2013-03-20 08:14:07

我目前使用页面OnLoad处理程序。我会认为那只是调用一次。您认为在图像完全加载之前，IE 9 + 10会调用它吗？ – 2013-03-20 08:15:58

在我的网页的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=""/>

所以上面应该让你的函数一点redundent，除非你是注入图像到页面的onload事件已解雇了。但是，如果你想加快速度，而不必等待一切下载，你可以使用DOM准备好听众，然后落实kennypu提到的方法：

Cross Browser Dom Ready

只是作为一个补充说明，据我所知，image.complete应该为所有现代浏览器的工作：

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

来源

2013-03-20 08:31:31 Pebbl

我确实使用window.onload并切换到窗口。addEventListener使事情稍微好一点，但有时仍然失败。这让我相信这确实是一个时机，当OnLoad hander被调用，IE 9和10似乎称它为时过早时...... – 2013-03-20 08:54:34

@GeneVincent如果你发布了更多的代码，StackOverflow社区可以帮助你调试到底是什么继续 - 特别是你的'onload'处理程序，但是越多的信息越好。 – Pebbl 2013-03-20 12:25:11

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

回答

相关问题