Почему событие onerror Chrome для элемента img запускается только один раз?

почему Chrome вызывает событие onerror для элемента img только один раз,когда все другие браузеры (IE7,8, 9, FF, Opera и Safari) вызывают его повторно?

есть ли способ заставить его повторить вызов onerror снова (в Chrome)?

jsfiddle

HTML:

<div id="thisWorks">
    this works in Chrome. onerror event is called once.
    <img src="http://www.asdfjklasdfasdf.com/bogus1.png" 
        onerror="fixit(this);" 
        rsrc="http://eatfrenzy.com/images/success-tick.png" />
</div>

<div id="thisDoesNotWork">
    this does not work in Chrome. onerror event is not called twice.
    <img src="http://www.asdfjklasdfasdf.com/bogus1.png" 
        onerror="fixit(this);"
        rsrc="http://www.asdfjklasdfasdf.com/bogus2.png|http://eatfrenzy.com/images/success-tick.png" />
</div>

JAVASCRIPT:

function fixit(img)
{
    var arrPhotos = img.getAttribute('rsrc').split('|');

    // change the img src to the next available
    img.setAttribute('src', arrPhotos.shift());

    // now put back the image list (with one less) into the rsrc attr
    img.setAttribute('rsrc', arrPhotos.join('|'));

    return true;    
}

EDIT: Per @Sunil D. комментарий о Chrome не выдает новый поиск из-за недопустимого доменного имени www.asdfjklasdfasdf.com на первоначальный скрипка пример, я пошел вперед и изменил доменное имя, чтобы соответствовать образу успеха, но с другим именем файла, поэтому он по-прежнему является 404. Это докажет, что это не недопустимое доменное имя, заставляющее Chrome спасаться со 2-й попытки.

EDIT: Обновлена скрипка и удалено использование jquery, чтобы просто вещи и исключить это.

6
events google-chrome html image onerror

5 ответов

Я пробовал способы, описанные выше, setAttribute ('src', null) имеет побочный эффект, т. е. добавляет другой запрос.

наконец, я использую 

    setTimeout(function(){ imgElement.src = 'http://xxxx'; }, 0)

и это работает!

посмотреть jsfiddle например.

5

хорошо получилось. Внутри функции, которую вы назначаете событию onerror,установить до null перед изменением его на новое значение.

img.setAttribute('src', null);

рабочая скрипку

Это каким-то образом заставляет Chrome сбросить его и заставит его повторно вызывать onerror, если последующие значения для src возвращает ошибку.

Примечание: пустая строка не будет работать и должна быть null.
примечание 2: это исправление работает с использованием чистого javascript (но не с jquery .attr метод). После того, как я опубликовал это решение, я попробовал его с помощью jquery .attr метод установки его в $img.attr('src', null); но это не сработало, и когда я изменил его на javascript, он работал. Я также попробовал его с помощью jquery .prop метод вместо этого так $img.prop('src', null); который работал в первый раз и потерпел неудачу при нескольких последующих обновлениях. Только чистый javascript кажется верным решение.

обновление:
Хорошо, оказывается, что, хотя вышеуказанное изменение исправляет Chrome и заставляет его повторно вызывать onerror, как и все другие браузеры (FF, Safari, Opera, IE7-9), это вызывает проблемы с событием onerror для IE10 и, таким образом, игнорирует любые допустимые изображения, назначенные src после установки его в =null в предыдущей строке. (...вздыхать.)

5

это правильное поведение. Вы не хотите загружать одно и то же изображение дважды-это пустая трата полосы пропускания.

какой Chrome создает объект в памяти, а затем применит его ко всем изображениям с соответствующим src.

Если вам нужно загрузить его дважды, создайте эти объекты через javascript и назначьте .onload=function() { .. } каждому.

0

Я думаю, что @Mikhail на правильном пути, за исключением немного другой причины. Во втором примере вы пытаетесь загрузить 2 изображения из одного и того же несуществующего домена www.asdfjklasdfasdf.com.

при попытке скачать bogus1.png, Chrome не удается разрешить домен на IP-адрес.

при попытке скачать bogus2.png (из того же несуществующего домена) Chrome вообще ничего не делает... потому что он знает, что поиск домена не удался. Правильно ли это поведение для chrome не отправлять другой onerror событие может быть открыто для обсуждения :) я ожидаю, что это должно быть.

чтобы доказать это, просто добавьте 1 символ в доменное имя для bogus2.png и оно будет работать, как вы ожидали.

редактировать

один из способов заставить его попытаться последующие загрузки, чтобы изменить src на <img> к пустой строке. Это немного банально, но работает. Вы могли бы установить свой что-то вроде этого: 

rsrc="''|http://www.asdfjklasdfasdf.com/bogus2.png|''|http://eatfrenzy.com/images/success-tick.png"

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

0

как ответил Etdashou на этот вопрос:https://stackoverflow.com/a/9891041/1090274, Настройка this.onerror=null; работал для меня.

0