title: JQuery: How to hide an image until source changed
body: <p>I have an image that is being resized programmatically, based on the current height/width of the container. My problem is that it shows the image at it's original size before it does the resizing. </p>
  
  <p>See this <a href="http://jsfiddle.net/ev4YL/1/" rel="nofollow">JSFiddle</a></p>
  
  <p>You'll notice how it flashes up a stretched image before it fits the image nicely in the middle. </p>
  
  <p>I want to hide the image until that resizing has taken place, but I can't figure out how.</p>
  
  <p>Any suggestions?</p>
  
  <p>JSCode:</p>
  
  <pre><code>function LoadImg(img) {
      img.css('visibility','hidden');
      var src=img.attr('src');
      var imgh = img.parent().height();
      var imgw = img.parent().width();
      var pattern = /&amp;?(w|h)=[^&amp;]+/g;
      src = src.replace(pattern, '');
      img.attr('src', src + '&amp;w=' + imgw + '&amp;h=' + imgh);    
      img.css('visibility','');
  }
  </code></pre>
  
  <p>Html:</p>
  
  <pre><code>&lt;div class="window"&gt;
  &lt;img src="http://www.angclassiccarparts.co.uk/image_anysize.aspx?f=/images/ww/panel/service_kits.jpg&amp;w=154&amp;h=154&amp;color=png" id="img" onload="LoadImg($(this));" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I've tried hiding with visibility hidden until the function has run, but that doesn't wait for it to load...</p>