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 延迟加载所有图像，否则 divs 始终隐藏。

Solution

Answer 1

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

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

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

Working example

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

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

jquery

lazy-loading

jquery-lazyload