How to preload images for Foundation's Orbit i

Question

Using Zurb's Foundation 4.1.5 (latest version), the Orbit image slider works great. Unfortunately it looks really for the first couple of seconds where all the images appear as a giant bulleted list. Then the JavaScript kicks in and it all is beautiful.

How do I avoid the initial ugliness? Can I preload the images? Can I have everything with display: none or visibility: hidden until it's ready?

Answer 1

Per Foundation documentation

We've cleaned up how Orbit initializes by adding a wrapper feature that stops the ugly flash of unstyled content. Here's the markup needed:

To add the preloader, simply include a div class="preloader" right inside the wrapper, like so:

<div class="slideshow-wrapper">
      <div class="preloader"></div>
      <ul data-orbit>
        <!-- Orbit slides -->
      </ul>
    </div>

Update Tested: Tested with Foundation 4.2.1 http://foundation.zurb.com/download.php

Used Fiddler to throttle download speeds http://fiddler2.com/