Скрыть сломанные изображения JQuery

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';" />

тестовое задание

или вы можете сделать это для всех ваших изображений

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

демонстрация

Answer 2

Почему бы просто не объединить события DOM с jQuery:

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

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

Это сработало для меня.

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();
    });
});

Кстати, у вас есть идентификатор изображения или вам нужно сделать это для случайного количества фотографий, чей идентификатор у вас нет???

Answer 5

Я работал над чем-то похожим, когда мне приходилось обновлять свой DOM с помощью JSON-фида, который состоял из URL-адресов изображений, но перед обновлением DOM мне приходилось обнаруживать поврежденные изображения, а также избегать загрузки изображений с шириной> 1000 пикселей. Я попытался добавить встроенные решения для ошибок и запросить 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);

});