Zurb Foundation Orbit：延遲加載？

Question

我對基礎的圖像滑塊軌道非常滿意，但它不支持開箱即用的延遲加載。 我知道Interchange ，但這不是我要找的。

我用叉子找到了這個討論作為解決方案。 我想避免分叉並更喜歡擴展代碼，以保持我的文件可升級。

沒有像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 ，以防止它自動初始化： <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">
• 當圖像被延遲加載時（例如在回調中），重新添加data-orbit屬性，並重新初始化軌道容器的基礎。 $gallery.find('.orbit').attr('data-orbit', '').foundation();