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

Я пробовал этот код, скопированный с сайта jQuery, но он не работает в IE7/IE8, но работает в других браузерах. Что не так с этим кодом, это с сайта jQuery (http://api.jquery.com/error/). Я использую jQuery версии 1.4.4.

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

Ответы

Ответ 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/

Ответ 2

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

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

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

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

Ответ 3

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

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