1

I have the Anything Slider working on my site, but I can't seem to get rid of the 2-3 second flash that occurs while the page is loading. When you first visit or refresh the page you'll see what appears to be the content of each li slide unstyled and all visible. Does anyone know of a way to get rid of the flash?

http://www.yourmembership.com/product-tour/nonprofits.aspx

cheriana
  • 103
  • 2
  • 2
  • 14

4 Answers4

1

You can hide the elements until they're loaded. In your stylesheet say:

.thumbNav
{
  display: none;
}

And in the callback for your slider say:

$( ".thumbNav" ).css( "display", "inline" );

Or just:

$( ".thumbNav" ).show( );
KeatsKelleher
  • 10,015
  • 4
  • 45
  • 52
  • I agree. This is what I would do as well. Simply hide the element(s) until jquery is ready and unhide it – Eonasdan Jan 06 '12 at 16:07
0

Have you tried putting your slider call in a document ready? This allows it to wait for the DOM to load before executing.

<script>
$(document).ready(
    function () {

// Your slider call here

});

</script>
Christopher Marshall
  • 10,678
  • 10
  • 55
  • 94
  • 1
    I think the problem is that the elements are not styled until the javascript is executed. This should have about the same result as the status quo. – KeatsKelleher Jan 05 '12 at 22:55
0

Instead of using $(document).ready, how about $(window).load();? See also Official way to ask jQuery wait for all images to load before executing something. The flash may be due to the latency from images loading the first time.

Community
  • 1
  • 1
j08691
  • 204,283
  • 31
  • 260
  • 272
0

If you are using the latest version of AnythingSlider, prevention of FOUC (flash of unstyled content) is included.

For older versions, please check the FAQ page which shows two different methods that could be used to prevent this problem.

Mottie
  • 84,355
  • 30
  • 126
  • 241