如何为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/