title: Ajax HEAD request via Javascript/jQuery
body: <p>I seem to be having some issues with making <code>HEAD</code> requests, and preserving the integrity of data in an array.</p>
  
  <p>Given this snippet:</p>
  
  <pre><code>var imageTemp = Array();
  
  $('*')
      .each(function(index){
          if($(this).css('background-image') != 'none'){
              imageTemp.push($(this).css('background-image').slice(5, -2));
          }
      });
  </code></pre>
  
  <p>I capture the URLs of all background-images on a given page. Now, trying to grab the size of each image via <code>HEAD</code> requests for <code>Content-Length</code>, I use this snippet:</p>
  
  <pre><code>var imageData = Array();
  
  for(var i = 0; i &lt; imageTemp.length; i++){
      ajaxSizeRequest = $.ajax({
          type: "HEAD",
          async: true,
          url: imageTemp[i],
          success: function(message){
              imageData.push([imageTemp[i], ajaxSizeRequest.getResponseHeader('Content-Length')]);
          }
      });
  }
  </code></pre>
  
  <p>However, when I dump <code>imageData</code> via <code>console.log</code>, I each element (which should be an array containing the URL and the content-length) ends up as <code>[undefined, XXXX]</code> where <code>XXXX</code> is always the size of the last requested <code>Content-Length</code></p>
  
  <p>I'm stumped, though it appears to be a timing/scoping issue. Do I have a sort of race-condition occuring here?</p>