Question

我的内容是图片损坏，每页都有多张图片。有些图像有空src值，有些图像只有404链接。

我一直在尝试使用

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

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

编辑<img>代码不适合我。

该代码有什么问题？

Answer 1

改为使用

<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

Answer 2

非常简单，

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

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

如果图像出错，则隐藏

Answer 3

为什么不直接将DOM事件与jQuery结合使用：

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

    this.onerror = function() {
        $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*/
    } 
});

但是有些人喜欢使用hiden图像在加载后显示自己：

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

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

如果你不能编辑img尝试类似的东西：

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

顺便说一句你有图像ID吗？或者你需要为你没有的随机数量的照片做这个吗？

Answer 5

我正在开发类似的东西，我必须使用JSON提要来更新我的DOM，该提取包含在图像网址上，但在更新DOM之前我必须检测损坏的图像，并且还要避免加载宽度为＆gt;的图像。 1000像素。我尝试在加载页面后添加内联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);

}）;

隐藏破碎的图像jQuery

5 个答案: