Как я могу возвратить данные двухуровневого изображения из abortable запроса Ajax и установить результат на src изображения HTML/DOM?

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

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?