Flash of Unstyled Content for the Orbit plugin

[EduardoBautista]

http://foundation.zurb.com/docs/components/orbit.html

You can view the issue there and just keep refreshing the page and you should see it.

[smaboshe]

I'm experiencing the same issue using Foundation 4.0.4:- An unstyled list of components in the slider visibly load and then collapse into the styled version when loading is complete.

This seems to have been an issue in older versions of Orbit as well. The stand-alone version (before Foundation) suggests a fix (see the "Achieving Perfection" tab):
http://www.zurb.com/playground/orbit-jquery-image-slider

The fix is almost exactly what I'd like to use but it does not seem to work with Orbit in Foundation 4.0.4. When I tried, it hid the slider entirely. Also, the fixed width and height won't work now that Orbit is responsive.

Is there a fix someone is currently using? It may be useful to have a section in the Orbit docs for this.

[EduardoBautista]

@smaboshe Yeah, and the version of the orbit slider you linked to is deprecated. It makes no sense why that feature is not in the new slider or it's just that I can't find the right documentation for it.

[smaboshe]

After poking around the Interwebs:

The official fix for this in Foundation 3 is to use the "Graceful Orbit Loading State" documentation:

• http://foundation.zurb.com/old-docs/f3/orbit.php
• https://twitter.com/ZURB/status/262965974972628995
• Issue Orbit slides are stacking on top of each other #548

The reason it works in Foundation 3 is because a class called "orbit" is added when Orbit is completely loaded.
https://github.com/zurb/foundation/blob/3-2-stable/vendor/assets/javascripts/foundation/jquery.foundation.orbit.js#L140

Orbit has changed quite a bit from Foundation 3 to Foundation 4. I do not see a similar "orbit" class being added.

@smileyj68 or @mhayes is there a recommended "Graceful Orbit Loading State" approach for Foundation 4?

[smaboshe]

After doing some tinkering and referring to the Foundation 4 Orbit documentation (http://foundation.zurb.com/docs/components/orbit.html) the following CSS seems to give me what I need.

My <ul data-orbit>...</ul> is wrapped in a DIV called #featured. Replace "featured" with whatever ID you use to contain your Orbit slides. You'll need to have your own "spinner.gif".

#featured {
  /* Pre-loading animation */
  background: url(loading.gif) center center no-repeat;
}

#featured ul {
  /* Prevent bullets showing before .orbit-container is loaded */
  list-style-type: none;
}

#featured img {
  /* Hide images before .orbit-container is loaded */
  display: none;
}

#featured .orbit-container img {
  /* Show images when .orbit-container is loaded */
  display: block;
}

This is a quick-and-dirty fix. If you have something more elegant, I'm happy to use that instead.

[andywillis]

This manages to fix the problem and while maintaining the dimensions of the div.

Add the class 'orbit-slides-container' to the <ul>. This gets added automatically by the JS, but it doesn't get duplicated if it's already there, Adding it to the template means that we can prevent the unflashed style without adding extra divs or ids. It also means that it will affect all orbits if there's more than one on a page.

Then add this to the stylesheet:

.orbit-slides-container li { visibility: hidden; }

and the following line to foundation.orbit.js in the callback for$(window).on('load.fndtn.orbit'... (line 129):

$slides_container.find('li').css('visibility', 'visible');

The line-before-last seems to provide the best effect.

[proimage]

Building on the solution @smaboshe provided, I came up with the following.

SCSS:

.slideshow-wrapper
{
    /* Pre-loading animation; try a base64 encoded animated gif for best results */
    background: url(loading.gif) center center no-repeat;

    ul
    {
        /* Prevent bullets showing before .orbit-container is loaded */
        list-style-type: none;
        margin: 0;
        /* Hide all list items... */
        li
        {
            display: none;
            .orbit-caption
            {
                /* ...and their captions... */
                display: none;
            }
        }
        /* ...except for the first one. */
        li:first-child
        {
            display: block;
        }
    }

    .orbit-container
    {
        /* Override default Foundation Orbit background color */
        background-color: transparent;
        li
        {
            /* Show images when .orbit-container is loaded */
            display: block;
            .orbit-caption
            {
                /* Show captions too */
                display: block;
            }
        }
    }
}

And the CSS if you're not using SCSS:

/* Pre-loading animation; try a base64 encoded animated gif for best results */
.slideshow
{
    background: url(loading.gif) center center no-repeat;
}

/* Prevent bullets showing before .orbit-container is loaded */
.slideshow ul
{
    list-style-type: none;
    margin: 0;
}

/* Hide all list items... */
.slideshow ul li
{
    display: none;
}

/* ...and their captions... */
.slideshow ul li .orbit-caption
{
    display: none;
}

/* ...except for the first one. */
.slideshow ul li:first-child
{
    display: block;
}

/* Override default Foundation Orbit background color */
.slideshow .orbit-container
{
    background-color: transparent;
}

/* Show list items when .orbit-container is loaded */
.slideshow .orbit-container li
{
    display: block;
}

/* Show captions too */
.slideshow .orbit-container li .orbit-caption
{
    display: block;
}

[hatefulcrawdad]

Thanks for the idea of including the slideshow-wrapper, worked great! We included a CSS3 loading animation inside an optional <div class="preloader"></div> with the option to change that class name in the SCSS variables.

[adion]

There are some issues with the code in 31f97a9 (wrong vendor prefixes on the transforms in the animations and the display logic for list items is too broad (bullets are being suppressed when they shouldn't)).

I found all I had to add to avoid the FOUC was the following:

ul[data-orbit] {
    margin: 0;
    padding-left: 0;
    list-style-type: none;
}

/* initially, hide all slides... */
ul[data-orbit] li,
ul[data-orbit] .orbit-caption {
    display: none;
}

/* ...except for the first one */
ul[data-orbit] li:first-child { display: block; }

/* show slides once .orbit-container is loaded */
.orbit-container ul[data-orbit] li,
.orbit-container ul[data-orbit] .orbit-caption {
    display: block;
}

[dangraphicmill]

Thanks adion, that worked a treat.

[kmacdonell79]

Thanks adion, that worked perfectly.

[jamzth]

adion, that's awesome. Thanks!

[lkallday45]

Great fix Adion - works beautifully!

[Joseluisblom]

it doesn't work for me using flex grid, any idea?

[sidoneill]

This is what I'm doing (using flex grid)
div.orbit { opacity:0; -webkit-transition: opacity 0.2s ease-out; /* Safari */ transition: opacity 0.2s ease-out; } div.orbit:not([data-orbit='']) { opacity:1; }