title: lazyload: show div only when it's contained image loads
body: <p>I'm using the <a href="http://www.appelsiini.net/projects/lazyload" rel="nofollow noreferrer">lazyload</a> plugin for loading all the images in my web. These images are each one contained in a div with also some description and buttons.</p>
  
  <pre><code>&lt;div class="container"&gt;
  &lt;h5&gt;blablabla&lt;/h5&gt;
  &lt;img class='lazy' data-original="http://example.gif" src=""&gt;
  &lt;form method="post" action='#'&gt;
    &lt;input type="submit" value='add'&gt;
    ...
  &lt;/form&gt;
  &lt;/div&gt;
  
  &lt;div class="container"&gt;
  ....
  &lt;/div&gt;
  
  ...
  </code></pre>
  
  <p>It's working but I would like to hide all the div until it's image was fully loaded, unfortunately I couldn't find any hint about how to accomplish it. Is it possible?</p>
  
  <p><strong>Edit:</strong>
  I still couldn't make it work, so I made a <a href="https://jsfiddle.net/9aopngmr/2/" rel="nofollow noreferrer">jsfiddle</a> hoping you could point me out what's going wrong there. If you comment the <code>display:none</code> lazyload work with all the images, otherwise the divs remain always hidden.</p>
  
  <p><a href="https://jsfiddle.net/9aopngmr/4/" rel="nofollow noreferrer">Solution</a></p>