Question

我正在尝试将onerror事件的事件处理程序附加到img元素，以便在加载时将其替换为某些文本。

我可以在Chrome和Firefox中使用它，但它在IE中不起作用。我正在使用IE11。

这是我的形象元素：

<img class="image-class" src="someURL" />

和javascript：

<script type="text/javascript">
    $(document).ready(function () {
        var imageError = function (img) {
            $(img).after('<span>Replacement Text</span>');
            $(img).remove();
        };
        var handler = function (e) {
            imageError(e.currentTarget);
        };
        $('.image-class').each(function () {
            $(this).error(handler);
        });
    });
</script>

我尝试用html本身绑定事件：

<img class="image-class" onerror="imageError(this)" src="someURL" />

我注意到在Chrome中调试后，在执行$(this).error(handler)行后，img元素仍然onerror定义为null。

有谁知道为什么这在IE中不起作用，以及如何让它在IE中工作？

Answer 1

在这里，尝试下面的尝试 - 它在IE 9中工作得很好。我怀疑问题与jQuery的期望或你使用内联JS将函数应用于图像的方式有关（可能是一个组合2）。

<!DOCTYPE html>
<html>
<head>
<script>
function byId(e){return document.getElementById(e);}
function newEl(tag){return document.createElement(tag);}

window.addEventListener('load', onDocLoaded, false);

function onImgError(evt)
{
    console.log("onImgError fired");
    console.log("Img id: " + this.id);

    var parent = this.parentNode;
    var span = newEl('span');
    span.innerHTML = "broken image replacement text";
    parent.insertBefore(span, this);
    parent.removeChild(this);
}

function onDocLoaded()
{
    var mImg = byId('mImg');
    mImg.addEventListener('error', onImgError, false);
    mImg.src = "imgs/girl.png";
}
</script>
<style>
</style>
</head>
<body>
    <img id='mImg' title='image error test'/>
</body>
</html>

将onerror的事件处理程序附加到图像在IE中不起作用

1 个答案: