I have several <picture> elements on a page and I tried to apply the FOUC prevention mentioned in the FAQ - it does not work, when the class="first" is applied to the img tag inside the <picture> element, the first image is shown, but after this the slideshow starts to show non-visible images.
It seems to work when the class is applied to <picture> itself. However, then there is still a little annoying flash visible on page load, not as catastrophic as without the anti-fouc css, but still clearly recognizable.
It would be great if you would like to provide a working example of how to implement cycle2 to responsive images with <picture> in a way that there is not one glimpse of fouc visible.
I have several
<picture>
elements on a page and I tried to apply the FOUC prevention mentioned in the FAQ - it does not work, when theclass="first"
is applied to theimg
tag inside the<picture>
element, the first image is shown, but after this the slideshow starts to show non-visible images.It seems to work when the class is applied to
<picture>
itself. However, then there is still a little annoying flash visible on page load, not as catastrophic as without the anti-fouc css, but still clearly recognizable.It would be great if you would like to provide a working example of how to implement cycle2 to responsive images with
<picture>
in a way that there is not one glimpse of fouc visible.Thank you very much for your attention!