Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Using flickity lazyload: no effect #58

Open
Jones-S opened this issue Feb 18, 2020 · 1 comment
Open

Using flickity lazyload: no effect #58

Jones-S opened this issue Feb 18, 2020 · 1 comment

Comments

@Jones-S
Copy link

Jones-S commented Feb 18, 2020

I am trying to use flickitys lazyload option, but it somehow does not have any effect.

here are my options:

data: () => {
    return {
      flickityOptions: {
        prevNextButtons: false,
        pageDots: true,
        wrapAround: true,
        lazyLoad: 1,
        resize: true,
        cellAlign: 'left',
        setGallerySize: false
        // autoPlay: 5000
      },
      currentSlide: 1
    }
  },

and my flickity slider:

<VueFlickity v-if="hasSlides" ref="flickity" :options="flickityOptions">
  <div v-for="(slide, index) in slides" :key="index" class="HeroSlider__gallery-cell">
    <img
      v-if="slide.image"
      :data-flickity-lazyload-src="slide.image.sizes.large"
      :data-flickity-lazyload-srcset="`${slide.image.sizes.huge} 2000w,
      ${slide.image.sizes.large} 1440w,
      ${slide.image.sizes.medium} 1280w,
      ${slide.image.sizes.small} 720w`"
      :data-sizes="'100vw'"
      :alt="slide.image.alt || slide.image.filename"
      class="HeroSlider__image"
    >
  </div>
</VueFlickity>

Do I miss something?

I also have to mention that I currently have 4 slides, so with lazyLoad: 1, I would expect that at least my last image is lazyloaded in a carousel... Actually even more!

Anyway all my images are loaded when loading the page.

Thanks for some hints on that.
Cheers

@Jones-S
Copy link
Author

Jones-S commented Feb 18, 2020

Ok, I realized one thing:

When using lazyLoad: true, it works.

When using lazyLoad: 1,
I see the following weird issue:

I have 4 slides:
On page load I get this:

Slide 1: loaded and displayed
Slide 2: When appearing on screen: LAZYLOADED
Slide 3: loaded on page load
Slide 4: loaded on page load

Do you have any explanation for this?
I would have expected Slide 4 to be lazyloaded and not slide 2...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant