lazyload: show div only when it's contained image loads

Question

I'm using the lazyload plugin for loading all the images in my web. These images are each one contained in a div with also some description and buttons.

<div class="container">
<h5>blablabla</h5>
<img class='lazy' data-original="http://example.gif" src="">
<form method="post" action='#'>
  <input type="submit" value='add'>
  ...
</form>
</div>

<div class="container">
....
</div>

...

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?

Edit: I still couldn't make it work, so I made a jsfiddle hoping you could point me out what's going wrong there. If you comment the display:none lazyload work with all the images, otherwise the divs remain always hidden.

Solution

Answer 1

You could make the img elements hidden by default, and then hook to the load() event of the images to show them:

.container img { visibility: hidden; }
.container img.show { visibility: visible; }

$('.container img').on('load', function() {
    $(this).addClass('show');
});

Working example