Grow your CSS skills. Land your dream job.

AnythingSlider: FOUC flash of unstyled content

  • # May 20, 2013 at 4:49 am

    Can anyone help with my FOUC, i need it fixed as it doesn’t look good when loading the page. The FX need to run on page load too so disabling that isn’t an option. Any help would be greatly appreciated.

    # May 20, 2013 at 1:44 pm

    Well, you can always set it to display: none; by default and then call the slider while .css()-ing the slider content to display: block;.

    # May 21, 2013 at 5:36 am

    I have tried every possible method of display: none and it doesn’t work. For example i have that set up now and it still flashes

    # May 21, 2013 at 10:36 am

    I’m not seeing what you mean by FOUC… at least not on my desktop in Chrome, Firefox or IE… do you mean the delay before the images show up? It might be better to reduce the size of those panel background images because it looks like they are about 200k in size and would take that much longer to load.

    # May 22, 2013 at 4:33 am

    Firefox, chrome, Safari and opera are ok, only get it occasionally. IE8 i get it every time i load the page or refresh, i havn’t tested on any other IE yet. The background images will be changed and reduced in size these are just placeholder images for testing. But the problem isn’t the background images it the three info boxs that have FX. They flash in their final natural position / opacity first, before the outFX takes them off screen / fades them and the inFX brings them back to their final position. I also get a flash of the scrollbar on IE8.

    edit – removing the background images entirely doesn’t change anything

    # May 22, 2013 at 1:34 pm

    @ChrisMzzz Try setting the [stopRepeat](https://github.com/CSS-Tricks/AnythingSlider/wiki/FX) FX option to `true`.

    # May 23, 2013 at 4:28 am

    but i need it to run on page load

    # May 23, 2013 at 10:19 am

    Hmm, then try initializing the FX extension in a `$(window).load(function(){ … });` instead of along side the AnythingSlider initialization in the document ready function.

    # May 23, 2013 at 12:28 pm

    not sure if i called it right but you can see that has stopped the effect on page load / refresh

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".