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?

Ed Charbeneau · Answer 1 · 2013-06-05T19:41:55.933

5

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/

edited Jun 05 '13 at 19:41

answered Jun 03 '13 at 14:45

Ed Charbeneau

4,186
21
22

Yes man But You need to try it by your self to know is it working as supposed or not Thanks for response :) – Mahmoude Elghandour Jun 04 '13 at 08:11
Tested it using version 4.2.1 with Fiddler to throttle the connection speed. It worked just fine. – Ed Charbeneau Jun 05 '13 at 19:41

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

1 Answers1

Linked