在三个CSS3列中延迟加载图像

Question

我有一个网站，可以在三列中显示图像。这些是已应用img的div中的所有column-count: 3个标记。

这些列包含一百多个图像，我想延迟加载以节省带宽。

有许多Javascript插件可用，例如http://www.appelsiini.net/projects/lazyload，在不使用column-count时效果很好。这些插件计算图像的顶部偏移量并确定图像是否可见。

然而，使用column-count，这些插件无法延迟加载图像。这可能是由于列的流量发生变化然后加载了图像而引起的。

有谁知道如何解决这个问题？我创建了一个小提琴，显示了使用的HTML和CSS：http://jsfiddle.net/LCbTc/2/

Answer 1

你提到的插件有这种情况的选项（滚动到当图像不连续部分时）..

$("img.lazy").lazyload({
    failure_limit : 999 /*the 999 should be a number larger than the number of images you have*/
});

如该部分所述，插件 假设 图像的显示顺序与HTML中的顺序相同。将此选项设置为较大的数字，表示页面中延迟加载的图像数量（插件的最坏情况）意味着它将检查所有图像，并且在查看视口外部的某些图像后不会停止。

更新代码的演示：http://jsfiddle.net/LCbTc/1/

Answer 2

我的网页包含两个包含图片的列。我将第一列图像的类设置为“lazy”，将第二列图像的类设置为“lazy-sidebar”。然后我调用两次lazyload，每个类一次。像魅力一样工作！

您可以尝试根据图像所在的列以编程方式设置类。例如，在3列中有100个图像我将为前34个图像设置类“lazy1”，为下一个图像设置“lazy2”类33张图片，其余为“lazy3”。或类似的规定。祝你好运！