Question

我已尝试从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 plugin，它允许在成功加载图像时进行回调。首先，我将图像设置为visibility:hidden。然后我在成功加载时将其设置为visible：

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

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

Answer 3

In my case in IE8, my replacement image was still not loading. The code below fixed this for me. You might have to play around with the timeout delay, to find out what works best.

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

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

3 个答案: