Javascript, изображение onload() не работает в webkit при загрузке одинакового изображения

У меня есть элемент <img>, и я меняю его атрибут src. Элемент имеет прикрепленную функцию onload. Каждый раз, когда я изменяю атрибут src и загружаются изображения, функция запуска должна выполняться.

В Chrome и Safari, если я назначаю тот же самый src, что и раньше, функция обработчика не запускается. Перед назначением того же src, что и раньше, я пробовал imgElement.src='', imgElement.src= null, imgElement.src='notExistingFile.jpg', и ни одно из них не работает.

Пожалуйста, помогите. У кого-то была эта проблема раньше?

Изменить: он работал, выполнив imgElement.src= '' перед назначением того же src, что и раньше:

imgElement.src = '';
imgElement.src = 'image.jpg';

Ответ 1

Это известная ошибка. Здесь обходной путь из этой ссылки:

Это не ошибка. WebKit - это еще больше строги. Вы должны создать экземпляр нового Image() объект перед заменой, например:
var photo = document.getElementById('image_id');
var img = new Image();
img.addEventListener('load', myFunction, false);
img.src = 'http://newimgsource.jpg';
photo.src = img.src;

Ответ 2

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

myImageObject.src = "something.png";
myImageObject.onload = myCallback;

сделайте следующее:

myImageObject.onload = myCallback;
myImageObject.src = "something.png";

Ответ 3

Чтобы добавить к Matt Ball ответ, рассмотрите img.onload вместо img.addEventListener().

var photo = document.getElementById('image_id');
var img = new Image();
img.onload = myFunction;
img.src = 'http://newimgsource.jpg';
photo.src = img.src;

img.onload легче читать и лучше работает среди пользовательских агентов.