Question

我在使用原始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标签吗？或者这不能用包裹在div中的img标签来完成吗？

谢谢。

Answer 1

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

图像不连续时

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

$（ “img.lazy”）。lazyload（{ failure_limit：10 }）;

将failure_limit设置为10会导致插件在找到折叠后的10张图像后停止搜索要加载的图像。如果你有一个时髦的布局设置这个数字高。

Answer 2

如果您使用的是Lazy Load 1.8.0，则可以指定容器

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

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

Answer 3

我尝试了不同的东西，直到我不理解任何事情。

但是后来，当还原时 - 我确实让它发挥作用。但不是通过添加容器或任何其他特殊选项。

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

感谢您的回复。