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

Question

使用Zurb的Foundation 4.1.5（最新版本），Orbit image slider效果很好。不幸的是，它看起来真的是前几秒所有图像都显示为一个巨大的项目符号列表。然后JavaScript开始了，一切都很美好。

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

Answer 1

每Foundation documentation

  

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

     

要添加预加载器，只需在右侧包含div class =“preloader”即可   在包装器内部，如下：

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