Как скрыть испорченные изображения в IE с помощью jQuery?

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

В моем случае в IE8, мой замещающий образ все еще не загружался.Код ниже исправил это для меня.Возможно, вам придется поиграть с задержкой тайм-аута, чтобы выяснить, что работает лучше всего.

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

Answer 3

Использование вышеуказанного решения все равно вызовет кратковременное появление «значка разбитого изображения», поскольку существует задержка между error() и hide().

Я использовал плагин jQuery для загрузки изображений , который разрешает обратный вызов при успешной загрузке изображения. Сначала я установил изображение на visibility:hidden. Затем я установил его на visible при успешной загрузке:

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

При этом используется немного больше ресурсов, но не будет отображаться значок разорванного изображения. Я не использую этот сайт в целом, но только разделы, где возможно сломанное изображение.