Zurb Foundation Orbit：延迟加载？

Question

我对 orbit, the image slider of foundation, but it doesn't support lazy-loading out of the box. I know Interchange 非常满意，但这不是我想要的。

我找到了 this discussion with a fork 作为解决方案。我想 避免分叉 并且更喜欢扩展代码，以保持我的文件 可升级 .

没有 event 像 on('before-init.fndtn.orbit')。

有谁知道如何解决这个问题？

提前致谢！

Answer 1

我切换到slick，因为没有正确的方法来使用开箱即用的延迟加载轨道，我问这个问题的时候。

几个月后，我仍然对 slick 很满意。

<img data-lazy="img/lazyfonz1.png"/>

$('.lazy').slick({
  lazyLoad: 'ondemand',
  slidesToShow: 3,
  slidesToScroll: 1
});

Answer 2

这可能取决于您的具体用例，但我可以这样做：

在您的模板中，从轨道容器中删除 data-orbit，以防止它出现 auto-initializing： <div class="orbit" role="region" aria-label="my gallery">
使用jQuery.lazy() 或类似的库来延迟加载图像。我用了data-src：<img class="orbit-image" data-src="/path/to/image.jpg" alt="description">
当延迟加载图像时（例如在回调中），re-add data-orbit 属性和 re-initialize 轨道容器的基础。 $gallery.find('.orbit').attr('data-orbit', '').foundation();

Zurb Foundation Orbit: lazy-loading?