I seem to be having some issues with making HEAD requests, and preserving the integrity of data in an array.

Given this snippet:

var imageTemp = Array();

$('*')

.each(function(index){

if($(this).css('background-image') != 'none'){

imageTemp.push($(this).css('background-image').slice(5, -2));

}

});

I capture the URLs of all background-images on a given page. Now, trying to grab the size of each image via HEAD requests for Content-Length, I use this snippet:

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')]);

}

});

}

However, when I dump imageData via console.log, I each element (which should be an array containing the URL and the content-length) ends up as [undefined, XXXX] where XXXX is always the size of the last requested Content-Length

I'm stumped, though it appears to be a timing/scoping issue. Do I have a sort of race-condition occuring here?