title: make sure an image is loaded while dynamically changing jquery
body: <p>I'm changing the image src of an image node. 
  I want to be able to make sure that it's changed before executing somecode. How would i do that?</p>
  
  <p>right now i have</p>
  
  <pre><code>function changePic(imgNode, newPic, desc){
      var descNode = $("#description");
      $(imgnode).fadeTo(500, 0, function(){
          $(imgnode).attr("src", newPic);
          $(imgnode).attr("alt", desc)
          descNode.text(desc);
          $(imgnode).fadeTo(500, 1);
      });
  }
  </code></pre>
  
  <p>Works great if the server's fast/ a local server. Works terribly if the server's slow, where the image will fade back in before changing...</p>
  
  <p>any idea?</p>
  
  <p>Edit: I'm loading the image when changePic is called. Any better ways to do it?</p>
  
  <p>More: Also why is it not a good idea to put the last line, </p>
  
  <blockquote>
    <p>$(imgnode).fadeTo(500, 1);</p>
  </blockquote>
  
  <p>, outside of the callback function?</p>