Запрос Ajax HEAD через Javascript / jQuery

Кажется, у меня возникли проблемы с выполнением запросов HEAD и сохранением целостности данных в массиве.

Учитывая этот фрагмент:

var imageTemp = Array();

$('*')
    .each(function(index){
        if($(this).css('background-image') != 'none'){
            imageTemp.push($(this).css('background-image').slice(5, -2));
        }
    });

Я фиксирую URL-адреса всех фоновых изображений на данной странице. Теперь, пытаясь получить размер каждого изображения с помощью запросов HEAD для Content-Length , я использую этот фрагмент:

var imageData = Array();

for(var i = 0; i < imageTemp.length; i++){
    ajaxSizeRequest = $.ajax({
        type: "HEAD",
        async: true,
        url: imageTemp[i],
        success: function(message){
            imageData.push([imageTemp[i], ajaxSizeRequest.getResponseHeader('Content-Length')]);
        }
    });
}

Однако, когда я выгружаю imageData через console.log , каждый элемент (который должен быть массивом, содержащим URL-адрес и длину содержимого) заканчивается как [undefined, XXXX] , где XXXX всегда равен размеру последнего запрошенного Content-Length

Я в тупике, хотя, похоже, это проблема времени / области видимости. У меня здесь что-то вроде состояния гонки?