Question

事实上，有没有办法告诉图像（放置了<img>标签，而不是通过JS）是否已正确加载到页面中？我有一个头像的画廊，偶尔第三方图像服务器最终提供404.我可以更改服务器端代码使用onerror="showGenericHeadshot()"，但我真的想避免对服务器进行更改代码。最终，我想确定图像是否丢失或损坏，并用通用的“未找到图像”图形替换它。我尝试过的事情：

Image.prototype.onerror = showGenericHeadshot - 不适用于<img>代码
$('img[src*=thirdpartyserver.com]).error(showGenericHeadshot) - 在IE中不起作用
$('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的图像的URL，请求实际上第二次发送。图像服务器失败的部分原因至少部分是我们的流量;所以我真的要做我能做的一切就是保持要求不断下降，否则问题只会变得更糟..

@ danp对我的问题的评论中提到的SO问题实际上得到了我的答案，尽管这不是那里接受的答案。我能够确认它适用于IE 7＆amp; 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来追溯检查图像是否正常你的爆头。类似下面的代码（live example）。该代码刚刚破灭，它不是生产质量 - 例如，您可能希望超时，之后如果您还没有收到load或error，则表示您认为错误。（您可能必须更换您的检查图像才能可靠地处理它。）

此技术假设重用src 不重新加载图片，我认为这是一个相当可靠的假设（它肯定是一个很容易 testable 因为这种技术已经被用于永久地预存图像。

我在Chrome，Firefox和Opera for Linux以及IE6（是的，真的）和IE8 for Windows上测试了以下内容。做了一个款待。

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

Live example

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

4 个答案: