lazyload：僅當它包含圖像加載時才顯示div

Question

我正在使用lazyload插件來加載我網絡中的所有圖像。這些圖像每個都包含在一個div中，還有一些描述和按鈕。

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

... 

它的工作，但我想隱藏所有的DIV，直到它的形象被完全加載，可惜我找不到任何關於如何完成它的任何暗示。可能嗎？

編輯： 我仍然無法使它工作，所以我做了jsfiddle希望你能指出我發生了什麼事情不對勁的地方。如果您對display:none懶惰加載工作評論所有圖像，否則div始終隱藏。

Solution

Answer 1

你可以把默認隱藏的img元素，然後勾到load()事件的圖片來展示他們：

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

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

Working example