如何为 Foundation 的 Orbit 图像滑块预加载图像？

【问题标题】：How to preload images for Foundation's Orbit image slider?如何为 Foundation 的 Orbit 图像滑块预加载图像？
【发布时间】：2013-05-06 07:51:34
【问题描述】：

使用 Zurb 的 Foundation 4.1.5（最新版本），Orbit image slider 效果很好。不幸的是，在最初的几秒钟内，所有图像都显示为一个巨大的项目符号列表。然后 JavaScript 启动，一切都很漂亮。

如何避免最初的丑陋？我可以预加载图像吗？我可以使用display: none 或visibility: hidden 获取所有内容，直到准备就绪？

【问题讨论】：

【解决方案1】：

每Foundation documentation

我们通过添加包装器功能清理了 Orbit 的初始化方式这阻止了无样式内容的丑陋闪光。这是标记需要：

要添加预加载器，只需包含一个 div class="preloader" right 在包装器内部，如下所示：

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

更新测试： 通过 Foundation 4.2.1 http://foundation.zurb.com/download.php

测试

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

【讨论】：