如何使用jQuery在IE中隐藏损坏的图像？

我尝试过从jQuery网站复制的代码，但它在IE7 / IE8中失败，但在其他浏览器中有效。 这段代码有什么问题，它来自jQuery网站（http://api.jquery.com/error/）。 我正在使用jQuery版本1.4.4。

$(document).ready(function(){ $("img").error(function(){ $(this).hide(); }); }); 

Answer 1

问题是，在执行$(document.ready) ，图像已经完成加载，因此不再触发加载/错误事件。

我想到绕过这个的唯一方法是重新加载图像，从而“强制”触发事件：

 $(document).ready(function(){ $("img").each(function(index) { $(this).error(function() { $(this).hide(); }); $(this).attr("src", $(this).attr("src")); }); }); 

它的性能不应该太差，因为图像最有可能来自缓存，而不是真正从服务器重新加载。

现场测试案例（有很酷的猫;））可以在这里找到： http ： //jsfiddle.net/yahavbr/QvnBC/1/

Answer 2

使用上述解决方案仍会导致“损坏的图像图标”的短暂出现，因为error()和hide()之间存在延迟。

我使用了jQuery imagesloaded插件 ，它允许在成功加载图像时进行回调。 首先，我将图像设置为visibility:hidden 。 然后我在成功加载时将其设置为visible ：

 $('div.target img').each(function(){ $(this).imagesLoaded(function(){ $(this).css('visibility','visible'); }) }) 

这会使用更多的资源，但会阻止“破碎的图像图标”显示。 我不在整个网站范围内使用此网站，但仅限于可能存在损坏图像的部分。

Answer 3

在IE8的情况下，我的替换图像仍未加载。 下面的代码为我解决了这个问题。 你可能不得不玩超时延迟，找出最有效的方法。

 setTimeout(function() { $("img").each(function () { $(this).error(function () { $(this).attr("src", "../imageupload/image-failed.png"); }); $(this).attr("src", $(this).attr("src")); }); }, 100);