html - 将图像包裹在 div 中的 LazyLoad

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-tags？或者这不能用包裹在 div 中的 img-tags 来完成吗？

谢谢你。

score 0 · Accepted Answer

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

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

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

score 0 · Accepted Answer

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

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

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

感谢您的回复。

score 0 · Accepted Answer

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

当图像不连续时

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

$("img.lazy").lazyload({ failure_limit : 10 });

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

3 回答 3