title: How to load an image in a div from jQuery dynamically without delay?
body: <p>So, I am attempting to load an image in jQuery, on hover, to another div without a delay for load times.</p>
  
  <p><strong><a href="http://jsfiddle.net/V3YeK/" rel="nofollow">HERE IS A WORKING EXAMPLE</a></strong></p>
  
  <p><strong>Raw code:</strong></p>
  
  <p><em>HTML:</em></p>
  
  <pre><code>&lt;div id="hover" data-img="http://lorempixel.com/output/animals-q-c-370-289-5.jpg"&gt;
      HOVER OVER ME
  &lt;/div&gt;
  
  &lt;div id="image"&gt;
      &lt;span&gt;
          &lt;img data-img="http://lorempixel.com/output/technics-q-c-370-289-4.jpg" src="http://lorempixel.com/output/technics-q-c-370-289-4.jpg" /&gt;
      &lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><em>jQuery:</em></p>
  
  <pre><code>$('#hover').on('mouseenter', function() {
      var newImg = $(this).attr('data-img');
      $('#image &gt; span &gt; img').attr("src", newImg);
  });
  $('#hover').on('mouseleave', function() {
      var oldImg = $('#image &gt; span &gt; img').attr('data-img');
      $('#image &gt; span &gt; img').attr("src", oldImg);
  });
  </code></pre>
  
  <p>As you can see, the image of the animal takes a little while to load. I need to remove this delay completely so that the image of the animal is displayed right away upon hover.</p>
  
  <p><strong>Things I have tried:</strong></p>
  
  <ul>
  <li>I tried reducing my images file size from 120kb down to just 20kb,
  still no luck.</li>
  <li>I tried loading my images to a hidden div upon page load so that
  they already existed within the page, instead of just within a
  <code>data</code> attribute, still no luck.</li>
  </ul>
  
  <hr>
  
  <p><em>PS. The version on my site contains more than 30 images, while the example is only using two. The example has very small images that could possibly be loaded straight away with fast internet. We have horrible internet speeds in our office, so if the images load straight away, try sourcing some larger images to see the problem at hand.</em></p>