title: Already loaded images change
body: <p>I have a webpage with n small divs containing each a different image, and a bigger one with no image in in.</p>
  
  <p>All the smaller divs have set up their background like this: <code>background-image:url(image1.jpg)</code> and so on.</p>
  
  <p>When clicking on each div, I want to set the bigger div with the clicked smaller div's background image, I am using the following code:</p>
  
  <pre><code>$("#largediv").css({
    'background-image': $(this).css('background-image')
  });
  </code></pre>
  
  <p>or alternatively, I use this:</p>
  
  <pre><code>$("#largediv").css({
    'background-image': "url(image1.jpg)" //I always have access to the id anyway.
  });
  </code></pre>
  
  <p>Now, both codes work perfectly, the problem is the following, tho: I have the feeling that everytime I am issuing these commands, the browser is sending an HTTP request to the server for the picture, even if it does not download it, just like it's checking of the image is still online. I found out about this by disabling the wifi once the page is fully loaded: the clicking does not change the image on the bigger div anymore.</p>
  
  <p>Can anyone explain me why, if there is a work around this issue, or if that's just my problem? And also, which one of the two codes provided is better to use, considering the images <em>should</em> already be loaded in the page?</p>
  
  <p>Thanks in advance</p>