title: Display Images after they are loaded completely
body: <p>I want to load the image after the image is completely loaded or downloaded in the browser.
  I dont want to display the image while it is being downloaded. Rather I would like to display a lower quality version of that image until the high quality images is loaded in the background, and when the image is completly loaded in the background, I want to replace the lower quality image with that image.</p>
  
  <p>I have two images, say</p>
  
  <pre><code>$LQimage = "LQabc.jpg";
  
  $HQimg = "HQabc.jpg";
  </code></pre>
  
  <p>How can I make it work?</p>
  
  <p><strong>EDIT</strong>
  With the answer posted by @codebox, this code worked.. thanks :)</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;script type="text/javascript"&gt;
  function load(){
      var img = new Image();
      var imgUrl = 'HQabc.jpg';
      img.onload = function(){
          // this gets run once the image has finished downloading
          document.getElementById('pp').src = imgUrl;
      }
      img.src = imgUrl; // this causes the image to get downloaded in the background
  }
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body onload="load()"&gt;
      &lt;img id="pp" src="LQabc.jpg" width=600/&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>