图像替换（JS/JQuery）在 IE 中工作，但不是 FF

Question

我尝试了多种解决方案来替换损坏的图像（JS 和 jQuery），并且都可以在 IE 上完美运行，但在 FF 中却不行，这是有原因的吗？

图像在 FF 中的处理方式是否不同可能导致这种情况？

JQuery 示例：

$("img").error(function(){
  $(this).unbind("error").attr("src", "nopic.jpg");
});

Javascript 示例：（由 img 标签中的 onError 事件触发）

function noimage(img){
   img.onerror="";
   img.src="nopic.jpg";
   return true; }

这两个示例在 IE 中都能完美运行，但在 FF 中则完全不行。什么给了？

提前致谢！

Answer 1

您必须先绑定error 处理程序，在设置图像的 src。所以在 HTML 中设置 src 然后通过 JavaScript 绑定它是行不通的。

您可以自己证明这一点：http://jsfiddle.net/4Wcnj/2/。

HTML：

<img width=500 id=img height=500 src="missing1">

JavaScript：

// At this point, missing1 is having an error, but no handler set so far

$("#img").error(function() {
    alert("Missing: " + $(this).attr("src"));
});

// The bind handler has been set, now if you set the src wrongly, you
// get the alert
$("img").attr("src", "missing2");

Answer 2

您是通过指向文件 URL 进行本地测试，对吗？

尝试在实际服务器上进行测试，即使它只是本地服务器。我相信 Firefox 依赖于图像 GET 返回的 HTTP 状态码来触发错误；如果您从 file://... URL 加载，则不涉及服务器，因此您不会收到错误消息。

来自jQuery API docs for error()：

当页面在本地提供时，此事件可能无法正确触发。由于error依赖于正常的HTTP状态码，如果URL使用file:protocol一般不会触发。

编辑：正如我们在 cmets 中所讨论的，这似乎是因为由于某种原因，您的 Intranet 服务器没有以 404（或任何其他错误，由事物的声音。）

因为 Firefox 没有收到错误，所以它不会触发错误处理程序，这看起来很正常。

我认为您的问题只是“我的服务器不会因缺少内容而返回 404 错误”，但是您可能需要进行更多实验以收集证据，然后再询问（并且可能在 Serverfault 而不是 SO 上询问） ...)