Замена изображений (JS / JQuery) работает в IE, но не в FF

Question

Я пробовал несколько решений для замены поврежденных изображений (как JS, так и jQuery), и все они отлично работают с IE, но не в FF, есть ли причина для этого?

Изображения обрабатываются по-разному в FF, что можетвызвать это?

JQuery Пример:

$("img").error(function(){
  $(this).unbind("error").attr("src", "nopic.jpg");
});

Пример Javascript: (инициируется событием onError в теге img)

function noimage(img){
   img.onerror="";
   img.src="nopic.jpg";
   return true; }

Оба эти примера отлично работают в IEно совсем не в ФФ.Что дает?

Заранее спасибо!

Answer 1

Вы проводите локальное тестирование, не так ли, указывая на URL файла?

Попробуйте протестировать на реальном сервере, даже если он только локальный. Я полагаю, что Firefox использует код состояния HTTP, возвращенный из изображения GET, чтобы вызвать ошибку; если вы загружаете из файла: // ... URL, сервер не задействован, поэтому вы не получите сообщение об ошибке.

Из документов jQuery API для error():

Это событие может не срабатывать правильно, если страница обслуживается локально. Поскольку ошибка зависит от нормальных кодов состояния HTTP, она обычно не будет запускаться, если в URL-адресе используется файл file: protocol.

РЕДАКТИРОВАТЬ: Как мы уже обсуждали в комментариях, это происходит потому, что по какой-то причине ваш сервер интрасети не отвечает на отсутствующий ресурс с 404 (или любой другой ошибкой, по звукам вещей.)

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

Я думаю, что ваша проблема просто стала: «мой сервер не возвращает 404 ошибки за отсутствующий контент», но вам, возможно, придется поэкспериментировать немного больше, чтобы собрать доказательства, прежде чем спрашивать их (и, возможно, спросить об этом на Serverfault, а не на SO ...)

Answer 2

Сначала необходимо связать обработчик error, до , чтобы установить источник изображения. Так что настройка src в HTML, а затем привязка его через JavaScript не работает.

Вы можете доказать это сами: http://jsfiddle.net/4Wcnj/2/.

HTML:

<img width=500 id=img height=500 src="missing1">

JavaScript:

// At this point, missing1 is having an error, but no handler set so far

$("#img").error(function() {
    alert("Missing: " + $(this).attr("src"));
});

// The bind handler has been set, now if you set the src wrongly, you
// get the alert
$("img").attr("src", "missing2");