title: Load SRC once image has been preloaded
body: <p>I have been building an image pre loader and have just found that I need to place the image URL in a data attribute on the image tag to stop the images all loading at once.</p>
  
  <p>I have the following HTML:</p>
  
  <pre><code>&lt;div class="slide-item"&gt;&lt;img data-url="http://www.domain.com/image.jpg" /&gt;&lt;/div&gt;
  &lt;div class="slide-item"&gt;&lt;img data-url="http://www.domain.com/image.jpg" /&gt;&lt;/div&gt;
  &lt;div class="slide-item"&gt;&lt;img data-url="http://www.domain.com/image.jpg" /&gt;&lt;/div&gt;
  &lt;div class="slide-item"&gt;&lt;img data-url="http://www.domain.com/image.jpg" /&gt;&lt;/div&gt;
  &lt;div class="slide-item"&gt;&lt;img data-url="http://www.domain.com/image.jpg" /&gt;&lt;/div&gt;
  &lt;div class="slide-item"&gt;&lt;img data-url="http://www.domain.com/image.jpg" /&gt;&lt;/div&gt;
  ...
  </code></pre>
  
  <p>And the following jQuery:</p>
  
  <pre><code>$.fn.preload = function() {
      this.each(function(){
          $('&lt;img/&gt;')[0].src = this;
      });
  }
  
  var imageArray = [];
  $('.slide-item img').each(function() {
      var img = $(this).data('url');
      imageArray.push(img); 
  });
  
  $([imageArray]).preload();
  </code></pre>
  
  <p>My aim is to have each image load sequentially, and once its loaded show.</p>
  
  <p><strong>My question is, how do I load the url into the image once its preloaded?</strong></p>
  
  <p>I have tested and found that the 'imageArray' contains the correct image URL's and this is passed over to the 'preload' function, but I can't figure out how to show the image onces its loaded.</p>