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

Question

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

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

Answer 1

根据基金会文档

我们已经通过添加一个包装器功能来清理 Orbit 的初始化方式，该包装器功能可以阻止无样式内容的丑陋闪烁。这是所需的标记：

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

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