Zurb Foundation Orbit：延迟加载？

Question

I'm very happy with orbit , the image slider of foundation , but it doesn't support lazy-loading out of the box. I know Interchange , but that's not what I'm looking for.

I found this discussion with a fork as a solution. I'd like to avoid a fork and prefer to extend the code, to keep my files upgradeable .

There's no event like on('before-init.fndtn.orbit') .

Does anyone know, how to fix this issue?

Thanks in advance!

Answer 1

I switched to slick , because there was no proper way to use orbit with lazy loading out of the box, the time i asked this question.

A few months later I'm still happy with slick.

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

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

Answer 2

It probably depends on your exact use case, but I was able to do it like this:

• In your template remove data-orbit from the orbit container, to prevent it from auto-initializing: <div class="orbit" role="region" aria-label="my gallery">
• Use jQuery.lazy() or a similar library to lazy load the images. I used data-src : <img class="orbit-image" data-src="/path/to/image.jpg" alt="description">
• When the images are lazy loaded (eg in a callback), re-add the data-orbit attribute, and re-initialize foundation for the orbit container. $gallery.find('.orbit').attr('data-orbit', '').foundation();