title: Changing an <img>'s src attribute and dispaying the new image _as it loads_
body: <p>I'm displaying images like this:</p>
  
  <pre><code>&lt;img src="placeholder.jpg" data-url="/get_image/{{image.id}}/" /&gt;
  </code></pre>
  
  <p><code>/get_image/{{image.id}}</code> returns some JSON with the URL to the actual image, and then I replace the <code>src</code> attrivute of the <code>&lt;img&gt;</code> tag using jQuery.</p>
  
  <p>The problem I have is that the image is displayed on the browser only when it's been completely downloaded. For large images, this can take a while and some users are thinking that the image is never loading, despite the fact that <code>placeholder.jpg</code> says "Loading..."</p>
  
  <p>It would be great if the image that's replacing the placeholder would actually visibly load (for instance top to bottom like most JPEGs) as opposed to just suddenly displaying when <em>all of it</em> has been downloaded.</p>
  
  <p>A way to show a progress bar would be even better.</p>
  
  <p>Does anybody have suggestoins?</p>