javascript - 基础 (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>

当我加载页面一段时间后，两个图像都出现堆叠，直到它加载到 Orbit Slider 中。我真的很想最小化这一点，并且在加载滑块之前不显示图像。我有一个非常快速的 VPS 设置，这样的事情从来没有真正成为问题。那可能吗？

Answer 1

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

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

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

#slider {
    display: none;
}

Answer 2

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

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

}