How to preload images for Foundation's Orbit image slider?

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/