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

Question

我有一个网站,显示三列图像.这些都是img已column-count: 3应用的div 中的所有标签.

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

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

随着column-count然而,这些插件无法lazyload图像.这可能是由于列的流量变化然后加载图像引起的.

有谁知道如何解决这个问题？我创建了一个小提琴,显示了使用的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/