基础(3)轨道图像滑翔机

Question

下面是基金会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>的可见性与document.ready函数中的javascript更改为可见的：

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

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

#slider {
    display: none;
}

Answer 2

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

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

}