visibility - 如何为 Foundation 的 Orbit 图像 slider 预加载图像？

Question

使用 Zurb's Foundation 4.1.5(最新版本)，Orbit image slider效果很好。不幸的是，它看起来确实在前几秒钟内所有图像都显示为一个巨大的项目符号列表。然后 JavaScript 开始工作，一切都很美好。

如何避免最初的丑陋？我可以预加载图像吗？我可以用 display: none 拥有一切吗？或 visibility: hidden直到准备好？

Answer 1

每 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>

更新测试:
经基础测试 4.2.1 http://foundation.zurb.com/download.php

使用 Fiddler 来限制下载速度 http://fiddler2.com/