基础 (3) 轨道图像滑块

Question

我在 Foundation 3 中有以下图像滑块代码。

<div class="row">
    <div class="twelve columns">
         <div id="slider">
              <img src="http://placehold.it/1600x375&text=[img 1]" />
              <img src="http://placehold.it/1600x375&text=[img 2]" />
         </div>
    </div>
</div>

然后，在文件的末尾，我有以下 js 以使其工作。

<script type="text/javascript">
 $(window).load(function() {
     $('#slider').orbit();
 }); </script>

当我加载页面一段时间后，两个图像看起来都是堆叠的，直到它加载到轨道滑块中。 我真的很想尽量减少这种情况，并且在加载滑块之前不显示图像。我有一个非常快速的 VPS 设置，这样的事情从来没有真正成为问题。这可能吗？

Answer 1

只需添加到<div id="slider"></div> 高度和溢出：隐藏

#slider {
height: 300px;
overflow: hidden;

}

Answer 2

一种方法是将 document.ready 函数中的<div id="slider"></div>with javascript 的可见性更改为可见：

$(function() {
    $('#slider').toggle();
    $('#slider').orbit();
});

这当然意味着您必须在 css 文档中指定 display 为 none：

#slider {
    display: none;
}