title: Show Image with Blur Effect
body: <p>I am looking for render image with blur effect in photo gallery.</p>
  
  <p>For example I have HTML</p>
  
  <pre><code>&lt;div&gt;
   &lt;ul&gt;
    &lt;li&gt;
     &lt;img&gt;
    &lt;/li&gt;
    &lt;li&gt;
     &lt;img&gt;
    &lt;/li&gt;
    &lt;li&gt;
     &lt;img&gt;
    &lt;/li&gt;
    &lt;li&gt;
     &lt;img&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Now what happens if image is heavy then it shows blank for corresponding element. I wants to maintain 2 versions of each image blury version and sharp version.</p>
  
  <p>Now I wants till sharp image gets loaded completely show blury image of that image and once sharp image loaded show sharp image.</p>
  
  <p>I can do it with onload event like keep 2 image tags one with blury image and another with sharp and show by default blury one image and on load event of sharp image hide blury one and show sharp one.</p>
  
  <p>I wants to understand best optimal practice to achieve this behavior in smooth way.</p>