title: img src & jQuery?
body: <p>I have an image, and using jQuery I've turned it into a button.
  The so called button has two states: regular and pushed.</p>
  
  <p>Using jQuery I detect a "mousedown" and "mouseup" and replace the "src" attribute, like so:</p>
  
  <pre><code>$("#btn").click(function() {
     ;//DO SOMETHING HERE WHEN PRESSED
  });
  $("#btn").mousedown(function() {
     $(this).attr({ src: regular.png });
  });
  $("#btn").mouseup(function() {
     $(this).attr({ src : pushed.png });
  });
  </code></pre>
  
  <p>While testing this offline it works great! But today I noticed that when the images are stored on the server it loads the images over and over and over again with every attribute change.</p>
  
  <p>How can avoid this load issue and make all the images load only once from the server?</p>
  
  <p>Also, if there is a better to accomplish what I'm trying to do here, please let me know.</p>
  
  <p>Thank you.</p>