隐藏损坏的图像jQuery

Question

我的内容包含损坏的图像，每页中有多个图像。有些图片的 src 值为空，有些图片的 404 链接断开。

我一直在尝试使用

<script type="text/javascript">
$(document).ready(function () {
    $("img").error(function(){
    $(this).hide();
    });
}); 
</script>

它不能按预期工作，不能在 IE 中工作，在 chrome 中我必须在第一次加载后重新加载页面以隐藏图像。谷歌了很多，但所有其他代码都是一样的。

编辑<img> 标签对我来说不是一个选项。

这段代码有什么问题？

Answer 1

为什么不将 DOM 事件与 jQuery 结合起来：

$("img").each(function () {
    var $this = $(this);

    this.onerror = function() {
        $this.hide();
    };
});

这对我有用。

Answer 2

我正在处理类似的事情，我必须使用包含图像 url 的 JSON 提要更新我的 DOM，但在更新 DOM 之前，我必须检测损坏的图像并避免加载宽度 > 1000px 的图像。我尝试在加载页面后添加内联 onerror 解决方案并查询 DOM，并在显示之前删除或隐藏 div，但这样做代价高昂并且阻碍了用户体验。 我认为这是一种更好的方法，可以节省 DOM 查询，并且可以在任何浏览器上运行。

这是 jsfiddle 上的解决方案。 http://jsfiddle.net/vchouhan/s8kvqj3e/60/

$(document).ready(function () {
// For demo purposes, I'm going to pass this URL variable to my function.
//resolved URL
var url = "http://asmarterplanet.com/mobile-enterprise/files/bus-stop-app.png",

//broken url
 brokenUrl = "http://pbs.twimg.com/profile_images/481800387230318592/pVyU2bzj_normal.jpeg";

    //Method takes the URL as a parameter to check if it resolves
var f_testImage = function(url){
    /*
        When the preloadImages Async call returns the object
        Validate and do the needful 
    */
    $.when(f_preloadImages(url)).done(function (returnedObj){
        /*
            If successful and Width > 500 
            (this was for my purpose, you can ignore it) 
        */
        if (returnedObj && returnedObj.width > 500) {
            alert("width greater than 500px: "+ returnedObj.width + "px"); // Alerts src.width > 500                 
        } else {
            alert("width smaller than 500px: "+ returnedObj.width + "px"); // Alerts src.width < 500               
        }
    }).fail(function(returnedObj){     // Fail condition captured through imgDfd.reject();      
        alert("image URL is broken and the width is: " + returnedObj);
    });
};

var f_preloadImages = function(imgurl) {
    var img = new Image(); // declare new img object
    imgDfd = new $.Deferred();// declare new deferred object

    // Test onload
    img.onload = function () {
        return imgDfd.resolve(img);
    };
    // Test onerror
    img.onerror = function () {
        return imgDfd.reject(0);
    };

    //Add imgURL to imgSrc after onload and onerror is fired
    img.src = imgurl;
    return imgDfd.promise();
};

//Fire testImage with url and then with brokenUrl as parameter
f_testImage(brokenUrl);

});

Answer 3

很简单，

你只需要添加一个 onerror 属性：

<img src="image.png" onerror='$(this).hide();'/>

如果图像出现错误，它会隐藏

Answer 4

对于可能存在的图像，我发现最优雅的解决方案是使用 $ajax，例如：

$.ajax({
    url: 'your_image.jpg',
    type: "POST",
    dataType: "image",
    success: function() {
        /* function if image exists (setting it in div or smthg.)*/
    },
    error: function(){
       /* function if image doesn't exist like hideing div*/
    } 
});

但有些人喜欢使用加载后显示自己的隐藏图像，例如：

<img src="your_image.jpg" onload="loadImage()">

两种解决方案都有效，使用最适合您问题的一种解决方案

如果您无法编辑 img，请尝试以下操作：

$(document).ready(function () {
    $("#img").hide();
    $('#img').load(function() {
     $("#img").show();
    });
});

顺便说一句，您是否有图像 ID，或者您是否需要为没有 ID 的随机数量的图片执行此操作？？？

Answer 5

改用它

<img src="image.png" onError="this.onerror = '';this.style.visibility='hidden';" />

test

或者你可以为你的所有图片都这样做

$(window).load(function() { 
   $("img").each(function(){ 
      var image = $(this); 
      if(image.context.naturalWidth == 0 || image.readyState == 'uninitialized'){  
         $(image).unbind("error").hide();
      } 
   }); 
});

demo