如何判断图像是否已正确加载 [英] How to tell if an image has loaded correctly

问题描述

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

Is there a way to tell, after the fact, whether an image (placed with the <img> tag, not via JS) has loaded correctly into a page? I have a gallery of head shots, and occasionally the third-party image server ends up serving up a 404. I can change the server-side code to use an onerror="showGenericHeadshot()", but I really want to avoid making changes to server-side code. Ultimately, I want to determine if an image is missing or broken and replace it with a generic "Image Not Found" graphic. Things I've tried:

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中破碎的图像图标

1. Image.prototype.onerror = showGenericHeadshot -- doesn't work for <img> tags
2. $('img[src*=thirdpartyserver.com]).error(showGenericHeadshot) -- doesn't work in IE
3. $('img[src*=thirdpartyserver.com]).css('backgroundImage','url(replacementimage.gif)') -- works, but still doesn't get rid of the broken image icon in IE

推荐答案

不幸的是，我无法接受@TJ Crowder和@ Praveen的优秀答案，尽管两者都表现出色所需的图像替换。 @ Praveen的答案需要更改HTML（在这种情况下，我应该只是挂钩< img> 标签自己的 error =事件属性。根据网络活动判断，如果您尝试使用刚刚在同一页面中404的图像的url创建新图像，请求实际上会再次发送。图像服务器出现故障的部分原因至少部分是我们的流量;所以我真的必须尽我所能来降低请求或者问题只会变得更糟..

Unfortunately, I'm not able to accept either @TJ Crowder's nor @Praveen's excellent answers, though both do perform the desired image-replacement. @Praveen's answer would require a change to the HTML (in which case I should just hook into the <img> tag's own error="" event attribute. And judging by network activity, it look like if you try to create a new image using the url of an image that just 404ed in the same page, the request actually does get sent a second time. Part of the reason the image server is failing is, at least partly, our traffic; so I really have to do everything I can to keep requests down or the problem will only get worse..

@ danp对我的问题的评论中提到的SO问题实际上得到了答案，虽然它不是那里接受的答案。我能够确认它适用于IE 7& 8，FF和webkit浏览器。我怀疑它是否适用于旧浏览器，所以我在那里有一个 try / catch 来处理任何异常。更糟糕的情况是没有图像替换发生，这与发生的情况没有什么不同现在没有做任何事情。我正在使用的实现如下：

The SO question referred to in @danp's comment to my question actually had the answer for me, though it was not the accepted answer there. I'm able to confirm that it works with IE 7 & 8, FF and webkit browsers. I'm doubtful it will work with older browsers, so I've got a try/catch in there to handle any exceptions. The worse case will be that no image-replacement happens, which is no different from what happens now without doing anything. The implementation I'm using is below:

$(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) {}
        }
    );
});

这篇关于如何判断图像是否已正确加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！