Vanilla-lazyload: Issue with Firefox >=69, image is not showing

Created on 30 Sep 2019  路  3Comments  路  Source: verlok/vanilla-lazyload

Describe the bug
When using Firefox >=69 (I only tested with 69 and 70-beta)
The lazyloading is acting in a weird way. The image is not loaded until the transition of the slider is finished.
It does not affect all images; (weird);

To Reproduce
Steps to reproduce the behavior:

  1. Visit https://hexagon-plaquistes.experts-plaquistes.fr/
  2. The slider initializes (slick slider); with a living room picture (OK)
  3. The slider starts changing slides; It's loading an image of a white ceiling (OK)
  4. The slider changes again the slides back to the initial image (the living room), and the bug appears there: the image is not showing until the transition finishes; (NOT OK)

Expected behavior
The image should show before the transitions ends

LazyLoad version
12.0.0

Desktop (please complete the following information):

  • OS: [MacOS, Windows]
  • Browser [Firefox]
  • Version [69, 70]

Screenshots
Plaquiste_Lyon_Hexagon_Plaquistes_I_SINIAT

Additional context
May be related to #368 ?

Thanks :)

Bug

All 3 comments

Hey @tristanbes,
this issue is known and it's because Slick Slider inject that image at the end of the slider after the transition ended.

Due to this specific behaviour, you shouldn't use LazyLoad to load slick slider images lazily, but the native Slick slider option. You can find documentation about it in the Slick slider website.

image

Also, if I may suggest you another slider library, please check out Swiper JS. It provides a much smoother and seamlessly native swiping effect, and it's library independent.

Thank you for this recommendation; I thought slick was the most recommendable one :). Will check that;

Was this page helpful?
0 / 5 - 0 ratings