Как я могу вернуть двоичные данные изображения из сбойного AJAX-запроса и установить результат в качестве источника изображения HTML / DOM?

Question

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

var img = document.createElement("img");
img.src = "http://mydomain.com/myImageServer?param=blah";

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

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

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

// Code sample uses jQuery, but jQuery is not a necessity

var img = document.createElement("img");

var xhr = $.ajax({
        url: "http://mydomain.com/myImageServer?param=blah",
        context: img,
        success: ImageLoadedCallback
    });

function ImageLoadedCallback(data)
{
    this.src = data;
}

function DoSomethingElse()
{
    if (condition)
        xhr.abort();
}

Но проблема в том, что эта строка не работает так, как я надеялся:

this.src = data;

Я искал высоко и низко. Нет ли способа установить источник изображения для двоичных данных изображения, отправляемых через AJAX?

Answer 1

Для этого вам нужно кодировать base64 data в data: URI .Но это не сработает в IE6-7, и есть ограничения на количество данных, которые вы можете поместить туда, особенно в IE8.Возможно, это стоит сделать в качестве оптимизации для браузеров, где это поддерживается, но я бы не стал полагаться на это.

Другой возможный подход - использовать XMLHttpRequest для предварительной загрузки изображения, а затем просто отбросить ответ иустановите src нового Image, чтобы он указывал на тот же адрес.Изображение должно быть загружено из кеша браузера.Однако в случае, когда вы генерируете изображения динамически, вам необходимо уделить некоторое внимание заголовкам кэширования, чтобы гарантировать, что ответ кэшируется.

Answer 2

Попробуйте, например,

this.src="data:image/png;base64,XXX"

... где XXX - ваши двоичные данные в кодировке base64. При необходимости измените тип содержимого. Однако я не буду с оптимизмом смотреть на широкую поддержку браузеров.

Answer 3

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