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

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

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

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

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

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

3 ответов


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

это не ошибка. 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;

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

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

этого:

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

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