Загрузить (двоичное) изображение с помощью Ajax

Question

Я хотел бы динамически вставить изображение на веб-страницу, используя JavaScript.Конечно, самый простой способ - просто обновить тег src элемента.Тем не менее, изображение на самом деле является динамически генерируемым PNG, и каждый раз для его генерации требуется около 15 секунд.Если я просто обновлю тег 'img', я боюсь, что нетерпеливые пользователи сочтут URL-адрес мертвым и покинут страницу до его отображения, поэтому я хотел бы отобразить загрузчик.

Для того, чтобы иметь возможностьотобразить загрузчик, я должен загрузить изображение через Ajax, а затем вставить в документ.Это возможно?Сначала я попытался выполнить Ajax-запрос, а затем, когда ему это удалось, обновить тег img src, надеясь, что браузеры будут достаточно умными, чтобы не загружать изображение заново, но, по-видимому, это не так.

Есть ликакой-нибудь обходной путь для контроля HTTP-запроса IMG без введения нового кода сервера?

Answer 1

Когда страница загружена, вы можете показать какое-нибудь фиктивное изображение, которое будет отображать ход загрузки:

<img src="loader.gif" id="myimg" />

и затем замените его фактическим динамическим изображением:

$(function() {
    $('#myimg').load(function() {
        $(this).unbind('load');
        this.src = '/script/dynamicimage';
    });
});

Answer 2

Вы можете показать загрузчик, а затем загрузить медленное изображение в скрытом теге с помощью запроса Ajax, а затем, когда он загружен, скрыть загрузчик и отобразить img.

РЕДАКТИРОВАТЬ: , как указал Пекка, load () ненадежен, так что это не нужно. Эта публикация посвящена той же проблеме и предлагает 2 возможных решения:

1. Используйте $ (window) .load, чтобы определить, когда были загружены ВСЕ элементы на странице (включая изображения).,Это может или не подойдет, в зависимости от ваших потребностей.
2. В github есть ссылка на фрагмент с функцией $ (). ImagesLoaded, которая в основном используется для решения этой проблемы.,

Answer 3

1. Отправьте ajax-запрос на загрузку изображения и покажите анимацию загрузки.
2. На стороне сервера, когда запрос получен, создайте изображение и сохраните его во временном месте.
3. Отправьте обратно ответ ajax в браузер на путь изображения.
4. Измените атрибут src для изображения, полученного через ajax.

Надеюсь, это сработает.

Answer 4

Не очень понятно, что вы пытаетесь сделать, однако ...
1. Во-первых, прикрепите обработчик события загрузки к вашему тегу изображения, который вы собираетесь установить своим src для вновь созданного изображения.,Заставьте этот тег img загрузить анимацию загрузчика, например, или просто используйте другой тег для этого.2. Затем сделайте AJAX-запрос к серверному скрипту, который генерирует ваше динамическое изображение.3. При успешном обратном вызове вызова AJAX установите src предыдущего упомянутого тега img для изображения, которое только что создал сервер. Имейте в виду, что тот факт, что для создания изображения на сервере потребовалось время, не означает, что браузер не будет тратить свое время на его загрузку.Вот почему мы прикрепили к нему обработчик событий загрузки. Кроме того, скрывайте загрузчик, если вы использовали для него отдельный элемент DOM.Это также должно охватывать проблемы с браузерами, не запускающими событие загрузки для кэшированных изображений.