title: Load an image through jQuery Ajax
body: <p>I am creating an application which browses a large amount of pictures. At this point, that portion of the project is done and it sorts, filters, and loads the correct pictures, and even splits them into separate pages for faster loading.</p>
  
  <p>This works great, but it still takes over 8 seconds to load the 25 pictures per page. I have done some research and I have concluded that using asynchronous jQuery Ajax requests would be the best to load them all at the same time as fast as possible.</p>
  
  <p>Here is my code for this so far:</p>
  
  <pre><code>var imageArray = &lt;?php if (!empty($images)) {echo '["' . implode('", "', $images) . '"]';} else {echo "false";} ?&gt;;
  console.log(imageArray);
  console.log(imageArray.length);
  for (i = 0; i &lt; imageArray.length; i++) {
      $.ajax({
          type: 'GET',
          url: imageArray[i],
          dataType: 'image/jpg',
          async: true,
          success: function (data) {
              $("#" + i).attr("src", data);
          }
      });
  }
  </code></pre>
  
  <p>The problem with this code is that it doesn't load nothing but an empty white square with a grey border. When I modify the code and run it in console in Chrome, <code>data</code> ends up being a string of jumbled up characters which I presume are the raw image data.</p>
  
  <p>I have been searching for several days now, including on SO, and I have yet to find a solution which does what I need. On the contrary, I have found solutions which simply put the url into the image source using jQuery <code>attr()</code> which isn't what I need.</p>
  
  <p>If anyone can provide any kind of solution to fix this code, or even perhaps a different and more efficient method of getting all the images, I am open to anything.</p>
  
  <p><strong>imageArray</strong>: <strong><a href="http://pastebin.com/03tvpNey" rel="nofollow">http://pastebin.com/03tvpNey</a></strong></p>
  
  <p>Regards,
  Emanuel</p>