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

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

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

8516

2018-01-03 06:07

起源

它给出了任何错误？ - Vivek

我看不出任何错误。 - newbie

答案:

问题是到时候 $(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/

2018-01-03 08:50

Thanx它工作了！ - newbie

在IE中，当对img元素使用error（）时，应该在设置图像的src之前绑定错误处理程序，否则它可能无法正确触发。

清理过的密码爱它<3 - Roshan Wijesena

对我不起作用......（IE9） - Mauricio Scheffer

@ShadowWizard我已经在另一个问题中找到了它，谢谢！ - Mauricio Scheffer

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

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

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

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

2017-09-22 04:02

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

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

2017-09-14 15:18

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

答案:

热门问题

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