将图像包裹在 div 中的 LazyLoad答案

【问题标题】：LazyLoad with images wrapped inside divs将图像包裹在 div 中的 LazyLoad
【发布时间】：2013-09-05 19:36:26
【问题描述】：

我在使用原始 appelsiini.net 中的 LazyLoad 插件时遇到问题。

当使用结构时

<img... />
<img... />
<img... />

上面的工作。但我有另一个需要的结构。

<div class="col-2-3">
    <img lazyload-img ...>
<div>
<div class="col-1-3">
    <p>Title+desc for image</p>
<div>

但是对于这种用法 - 我没有运气。我查看了选项，并试图找到答案。但没有。

LazyLoad 是否仅适用于连续的 img-tags？或者用 div 包裹的 img-tags 不能做到这一点？

谢谢。

【问题讨论】：

【解决方案1】：

您是否从插件页面尝试过这种技术？

当图像不连续时

滚动页面后，延迟加载会在未加载的图像中循环。在循环中，它检查图像是否可见。默认情况下，当找到折叠下方的第一张图像（不可见）时，循环停止。这是基于以下假设。页面上的图像顺序与 HTML 代码中的图像顺序相同。在某些布局假设下，这可能是错误的。您可以使用 failure_limit 选项控制加载行为。

$("img.lazy").lazyload({ 失败限制：10 });

将 failure_limit 设置为 10 会导致插件在找到首屏下方的 10 张图片后停止搜索要加载的图片。如果您有一个时髦的布局，请将此数字设置为较高的值。

【讨论】：

【解决方案2】：

如果您使用的是延迟加载 1.8.0，您可以指定容器

$(".col-2-3 img").lazyload({ container: $(".col-2-3") });

查看用于初始化延迟加载的 jQuery 会很有帮助。

【讨论】：

【解决方案3】：

我尝试了不同的事情，直到我对所有事情都一无所知。

但后来，当恢复时 - 我确实让它工作了。但不是通过添加容器或任何其他特殊选项。

我想这可能与以某种方式向某些容器添加一些 clearfix 有关。

感谢您的回复。

【讨论】：