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

Question

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

1. Image.prototype.onerror = showGenericHeadshot - 不适用于 标签
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（在这种情况下，我应该挂钩 标记自己的 error="" 事件属性。并通过以下判断网络活动，看起来如果您尝试使用在同一页面中刚刚进行 404 处理的图像的 url 创建新图像，该请求实际上会再次发送，图像服务器失败的部分原因是。至少部分是我们的流量；所以我真的必须尽我所能来减少请求，否则问题只会变得更糟。

@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);
    }
});​

实例