Как мне ждать загрузки изображения после вызова ajax с использованием jquery?

Question

У меня есть скрипт Python, который выполняет некоторые манипуляции с изображением JPEG. Я передаю некоторые параметры этому сценарию и вызываю его со своей HTML-страницы. Скрипт возвращает тег img src = "newimage.jpg.

Я знаю, как ждать ответа от скрипта, но я не знаю, как определить, когда изображение полностью загружено (когда оно есть, я хочу его отобразить). Теперь я получаю медленную загрузку изображения, поэтому пользователь видит этот процесс «загрузки». Вместо этого я хочу получить сообщение, сообщающее пользователю, что нужно ждать, пока изображение загружается, только тогда я хочу отобразить изображение.

Answer 1

Вы можете динамически создавать новое изображение, связывать что-либо с его событием загрузки и устанавливать источник:

$('<img>').bind('load', function() {
    $(this).appendTo('body');
}).attr('src', image_source);

Answer 2

Загрузка изображения

Ожидание ajaxRequest

Answer 3

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

Без библиотеки вы могли бы сделать что-то вроде этого:

var el = document.getElementById('ImgLocation');

var img = document.createElement('img');
img.onload = function() {
    this.style.display = 'block';
}
img.src = '/path/to/image.jpg';
img.style.display = 'none';

el.appendChild(img);