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 lazyload的评论与所有图片一起使用，否则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

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

1 个答案: