包含包装在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标签？或者用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

我尝试了不同的东西，直到我对一切都不再了解。

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

我猜这可能与在一些容器中添加一些清晰的修复程序有关。

感谢您的回复。

这是供好奇的人使用的网址;) http://snickerietivarberg.se/wordpress/referenser/trapp-trappracken/?codekitCB=400070072.155490