HTML图像加载触发一个错误

HTML Image onload triggers onerror?

本文关键字：一个 错误 图像 加载 HTML      更新时间：2024-01-15

我有一个html图像，标记为follow

   <image src = 'image.png' onerror = "handleError(this)" onload = "handleLoad(this)">
    function handleError(n){
        getFirstChild(n.parentNode).style.display = '',n.style.display = 'none';
    }
    function handleLoad(n){
        getFirstChild(n.parentNode).style.display = 'none',n.style.display = '';
    }

我有一个单独的函数getFirstChild，但这与下面的问题无关。

基本上，IE 11中发生的事情是onLoad处理程序被触发，我的函数正在正确设置显示，然而，在onLoad被触发后，oneror也被触发，并覆盖handleLoad函数所做的工作。遗憾的是，这个应用程序只在IE浏览器中受支持，但它只在IE11版本中出现，在IE10中，它可以正常工作。

我不确定onLoad是如何触发的，然后在onLoad从src中找到图像后立即触发onError。

第二次编辑

正如下面的评论所示，我无法在IE11上重现这一点。这可能是因为我的代码同时试图做不同的事情，但有什么方法可以解释oneror处理程序是触发的吗？我试着打印出Image项目的src，但这似乎不是问题所在，因为onError和onLoad都返回了相同的src，而且图像显然在那里。无论如何，我可以看到是什么导致onError触发？

window.onload事件被程序员用来启动他们的web应用程序。IE为标签支持一个非常方便（但非标准）的属性：defer。此属性的存在将指示IE将脚本的加载推迟到DOM加载之后。不过，这只适用于外部脚本。另一个需要注意的重要事项是，不能使用脚本设置此属性。这意味着您不能使用DOM方法创建脚本并设置defer属性——它将被忽略。

使用方便的defer属性，我们可以创建一个迷你脚本，调用我们的onload处理程序：

<script defer src="ie_onload.js" type="text/javascript"></script>

这个外部脚本的内容将是一行代码，用于调用我们的onload事件处理程序：

init();
function init() {
// quit if this function has already been called
if (arguments.callee.done) return;
// flag this function so we don't do the same thing twice
arguments.callee.done = true;
// do stuff
};

正如我们所看到的，在IE中使用DOM事件处理程序有很多问题，因此条件编译可能是解决OP问题的另一个选择。IMHO你应该去这个链接：

http://dean.edwards.name/weblog/2005/09/busted/
相关文章：