如何为Foundation的Orbit图像滑块预加载图像? [英] How to preload images for Foundation's Orbit image slider?

问题描述

使用Zurb的Foundation 4.1.5(最新版本)，轨道图像滑块效果很好.不幸的是，它看起来确实在最初的几秒钟内所有图像都显示为一个巨大的项目符号列表.然后，JavaScript开始运行，一切都变得很漂亮.

Using Zurb's Foundation 4.1.5 (latest version), the Orbit image slider works great. Unfortunately it looks really for the first couple of seconds where all the images appear as a giant bulleted list. Then the JavaScript kicks in and it all is beautiful.

如何避免最初的丑陋?我可以预加载图像吗?在准备就绪之前，我可以用display: none或visibility: hidden拥有所有东西吗?

How do I avoid the initial ugliness? Can I preload the images? Can I have everything with display: none or visibility: hidden until it's ready?

推荐答案

每基金会文档

我们通过添加包装器功能来清理Orbit的初始化方式 可以停止未样式化内容的丑陋闪烁.这是标记 需要:

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:

要添加预加载器，只需在右侧添加一个div class ="preloader" 在包装器内部，就像这样:

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>

已测试更新: 已通过Foundation 4.2.1 进行了测试. http://foundation.zurb.com/download. php

Update Tested: Tested with Foundation 4.2.1 http://foundation.zurb.com/download.php

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

Used Fiddler to throttle download speeds http://fiddler2.com/

这篇关于如何为Foundation的Orbit图像滑块预加载图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！