延迟加载：仅在包含图像加载时显示 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 将始终保持隐藏状态。

溶液

Answer 1

默认情况下，

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

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

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

工作示例