javascript - 基础 (3) 轨道图像 slider

Question

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

<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 中。 我真的很想尽量减少它，并且在加载 slider 之前不显示图像。我有一个非常快速的 VPS 设置，像这样的事情从来都不是真正的问题。这可能吗？

Answer 1

一种方法是更改​​ <div id="slider"></div> 的可见性在 document.ready 函数中使用 javascript 以使其可见:

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

这当然意味着您必须指定 display是none在 css 文件中:

#slider {
    display: none;
}