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

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');
    }

Answer 2

不幸的是，尽管两者都能执行所需的图像替换，但我既不能接受@TJ Crowder的回答，也不能接受@Praveen的回答。 @Praveen的答案将需要更改HTML（在这种情况下，我应该仅挂接到<img>标记自身的error=""事件属性。根据网络活动来判断，如果您尝试使用创建新图像如果图像在同一页面中刚进入404，该请求实际上确实会第二次发送。图像服务器发生故障的部分原因，至少部分是我们的流量；所以我真的必须尽我所能降低请求数量，否则问题只会变得更糟。

@danp的评论中提到的SO问题对我的问题实际上为我找到了答案，尽管那不是那里被接受的答案。 我能够确认它可以与IE 7和8，FF和Webkit浏览器一起使用。 我怀疑它是否可以与较旧的浏览器一起使用，因此我在那里try/catch了所有异常。 更糟糕的情况是没有图像替换发生，这与现在不执行任何操作没有什么不同。 我正在使用的实现如下：

$(function() {
    $('img[src*=images.3rdparty.com]').each(
        function() {
            try {
                if (!this.complete || (!$.browser.msie && (typeof this.naturalWidth == "undefined" || this.naturalWidth == 0))) {
                    this.src = 'http://myserver.com/images/no_photo.gif';
                }
            } catch(e) {}
        }
    );
});

Answer 3

替代文字是否足够？ 如果是这样，您可以使用img标签的alt属性。

Answer 4

我想我已经明白了：加载DOM时（甚至在window.load事件上-毕竟，当所有图像都将要获得时，您要这样做），您可以追溯检查通过创建一个新的img元素，挂接其load和error事件，然后循环从每个爆头抓取src ，可以使图像正常。 类似于下面的代码（ 实时示例 ）。 该代码刚刚破折号，而不是生产质量–例如，您可能想要超时，在此之后，如果您既未收到load或error ，则假定为错误。 （您可能必须替换检查图像才能可靠地处理。）

这种技术假定重用src 不会重新加载的形象，我认为这是一个相当可靠的假设（这当然是一个容易测试的一个），因为该技术已用于永久预缓存图像。

我已经在用于Linux的Chrome，Firefox和Opera以及用于Windows的IE6（是的）和IE8上测试了以下内容。 工作了请客。

jQuery(function($) {
    var imgs, checker, index, start;

    // Obviously, adjust this selector to match just your headshots
    imgs = $('img');

    if (imgs.length > 0) {
        // Create the checker, hide it, and append it
        checker = $("<img>").hide().appendTo(document.body);

        // Hook it up
        checker.load(imageLoaded).error(imageFailed);

        // Start our loop
        index = 0;
        display("Verifying");
        start = now();
        verify();
    }

    function now() {
        return +new Date();
    }

    function verify() {
        if (!imgs || index >= imgs.length) {
            display("Done verifying, total time = " + (now() - start) + "ms");
            checker.remove();
            checker = undefined;
            return;
        }
        checker[0].src = imgs[index].src;
    }

    function imageLoaded() {
        display("Image " + index + " loaded successfully");
        ++index;
        verify();
    }

    function imageFailed() {
        display("Image " + index + " failed");
        ++index;
        verify();
    }

    function display(msg) {
        $("<p>" + now() + ": " + msg + "</p>").appendTo(document.body);
    }
});​

现场例子