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?

Calder

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/

Polyploid

Yes man But You need to try it by your self to know is it working as supposed or not Thanks for response :) – Cassino

Tested it using version 4.2.1 with Fiddler to throttle the connection speed. It worked just fine. – Polyploid