javascript - 如何判断图像是否已正确加载

Question

事后有没有办法判断图像(使用 <img> 标签放置，而不是通过 JS)是否已正确加载到页面中？我有一个头像库，有时第三方图像服务器最终会提供 404。我可以更改服务器端代码以使用 onerror="showGenericHeadshot()" ，但我真的想避免对服务器端代码进行更改。最终，我想确定图像是否丢失或损坏，并将其替换为通用的“图像未找到”图形。我尝试过的事情:

1. Image.prototype.onerror = showGenericHeadshot -- 不适用于 <img>标签
2. $('img[src*=thirdpartyserver.com]).error(showGenericHeadshot) -- 在 IE 中不起作用
3. $('img[src*=thirdpartyserver.com]).css('backgroundImage','url(replacementimage.gif)') -- 有效，但仍然无法消除 IE 中损坏的图像图标

Answer 1

<img scr='someUrl' id="testImage" />

jQuery('#testImage').bind('load',function(){
         alert ('iamge loaded');
});

为了避免竞争情况，请执行以下操作

<img _src="http://www.caregiving.org/intcaregiving/flags/UK.gif" />
// i have added an underscore character before src



jQuery('img').each(function(){
        var _elm=jQuery(this);
        _elm.bind('load',_imageLoaded).attr('src',_elm.attr('_src'))
    });

    function _imageLoaded()
    {
        alert('img loaded');
    }