Gen*_*ent 5 javascript portability image loading
在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处理程序.
在我的网页的 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 提到的方法：
正如补充说明，据我所知，image.complete应该适用于所有现代浏览器：
https://developer.mozilla.org/en-US/docs/DOM/HTMLImageElement