jquery - lazyload：仅在包含图像加载时才显示 div

Question

我正在使用延迟加载插件来加载我的网络中的所有图像。这些图像每一个都包含在一个 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 将始终隐藏。

解决方案

Answer 1

您可以img默认隐藏元素，然后挂钩到load()图像的事件以显示它们：

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

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

工作示例