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

Question

У меня есть элемент <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';

Answer 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;

Answer 2

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

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

сделать это:

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

Answer 3

Чтобы добавить ответ Мэтта Болла, рассмотрите 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 легче читать и лучше работает в пользовательских агентах.