Почему мое предупреждение JavaScript отображается перед обновлением изображения с использованием document.getElementByID?

Question

В моем коде JavaScript я сначала вызываю функцию для обновления изображения:

document.getElementByID("i1").src = newImage;

затем через несколько операторов вызывается функция alert () для отображения сообщения:

alert("image updated!");

Однако, когда я запускаю этот код, на самом деле происходит то, что окно предупреждения появляется до , изображение обновляется. Когда я нажимаю кнопку «ОК» в диалоговом окне, чтобы закрыть окно предупреждения, изображение обновляется.

Почему порядок этих событий не сохраняется? И есть ли какая-то функция синхронизации, которую я могу вызвать, чтобы дождаться завершения обновления изображения, прежде чем отобразится диалоговое окно с предупреждением?

Я открыт для реструктуризации кода некоторыми способами (то есть, используя что-то отличное от функции alert ()), но я бы предпочел решение, позволяющее существующему коду работать должным образом.

Answer 1

Загрузка изображения асинхронная. Вам нужен обратный вызов для загрузки изображения.

Если вы используете jQuery, вы можете сделать это так:

var img = $('#i1');
img.load(function() {
    alert('image updated!');
});
img.src = newImage;

Если вы используете Prototype, вы можете сделать это следующим образом:

var img = $('i1');
Event.observe(img, 'load', function(e) {
    alert('image updated!');
});
img.src = newImage;

Обратите внимание, что в любом случае важно сначала определить обратный вызов, а затем установить изображение src.

Answer 2

Простой.

Установка свойства src изображения инициирует загрузку изображения.Но поскольку загрузка происходит асинхронно, окно предупреждения отображается до завершения загрузки.

Answer 3

Окно предупреждения блокирует обновление изображения в фоновом режиме. Браузер загружает изображение (вы можете увидеть это с помощью wireshark или чего-то подобного), но браузер ничего не меняет на веб-странице во время выполнения JavaScript. Если у вас есть интенсивные вычислительные методы javascript, попробуйте использовать WebWorkers.