search

metafizzy / flickity-docs

:memo: documentation for Flickity
28 stars 8 forks source link

How to handle FOUC ( Flash of Unstyled Content) with this Flikcity? #25

Closed xcelpixel closed 8 years ago

xcelpixel commented 8 years ago

Hi, I am facing FOUC with this slider. How to handle this? First on page loading all slides won't render properly( Stacked). I hope, you understand my issue.

Demo URL: http://33woodst.com/iac-beta/ Thanks

xcelpixel commented 8 years ago

buzzz?

desandro commented 8 years ago

Hide the gallery by default

.flick-gallery { opacity: 0; }

Then show it on doc ready

$(document).ready(function(){

  var $gallery = $('.flick-gallery').flickity({
     // options
    wrapAround: true,
    percentPosition: false,
    pageDots: false
  })

  // show gallery after Flickity enabled
  $gallery.css({ opacity: 1 });

});

I'm not sure what's taking so long for Flickity to load. It's running on document ready. I would look into why that takes long on your page.

xcelpixel commented 8 years ago

@desandro Thank you so much!

xcelpixel commented 8 years ago

@desandro Sorry there's an issue! Whenever user comes on this website. It shows only arrow or you can say 40px height of the gallery.By clicking refresh again or windows resize, it starts working properly.

Please have a look. Thanks

desandro commented 8 years ago

Sorry, but I am not available for personal support.