Lazyload: div nur anzeigen, wenn es enthalten ist Bild lädt

Question

Ich verwende das lazyload Plugin zum Laden aller Bilder in meinem Web. Diese Bilder sind jeweils in einem Div mit einigen Beschreibungen und Schaltflächen enthalten.

<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> 

... 

Es funktioniert, aber ich mag die ganze div verbergen, bis es vollständig konnte ich jeden Hinweis nicht gefunden, leider geladenes Bild ist, wie es zu erreichen. Ist es möglich?

Edit: Ich konnte es immer noch nicht funktioniert, so habe ich eine jsfiddle gehofft, dass Sie mir zeigen könnte, was da schief geht. Wenn Sie die display:none Lazyload-Arbeit mit allen Bildern kommentieren, bleiben die divs immer verborgen.

Solution

Answer 1

Sie könnten die img Elemente standardmäßig ausgeblendet machen, und dann auf die load() Ereignis der Bilder, um sie zu zeigen Haken:

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

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

Working example