我有一个在三列中显示图像的网站。这些都是应用了 column-count: 3 的 div 中的 img 标签。
这些列包含一百多张图像，我想延迟加载这些图像以节省带宽。
有很多可用的 Javascript 插件，例如 http://www.appelsiini.net/projects/lazyload在不使用 column-count 时效果很好。这些插件计算图像的顶部偏移量并确定图像是否可见。
然而，使用column-count，这些插件无法延迟加载图像。这可能是由于加载图像后列的流动发生变化所致。
有谁知道如何解决这个问题？我创建了一个 Fiddle，它显示了使用的 HTML 和 CSS:http://jsfiddle.net/LCbTc/2/
最佳答案
您提到的插件有针对这种情况的选项(滚动到当图像不连续时部分)。
$("img.lazy").lazyload({
failure_limit : 999 /*the 999 should be a number larger than the number of images you have*/
});
如该部分所述，插件假定图像的显示顺序与它们在 HTML 中的顺序相同。将此选项设置为大于页面中延迟加载图像的数量(插件的最坏情况)意味着它将检查所有图像，并且在发现视口(viewport)外的一些图像后不会停止。
已更新代码的演示:http://jsfiddle.net/LCbTc/1/
关于javascript - 在三个 CSS3 列中延迟加载图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23493863/