基础 (3) 轨道图像滑块

Question

I have the following code for an image slider in 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>

Then, at the end of the file I have the following js in order for it to work.

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

When I load the page for a little time both images appear stacked until it loads into the Orbit Slider. I really would like to minimize this and not have the images appear until the slider is loaded. I have a very fast VPS setup and something like this has never really been a problem. Is that possible?

Answer 1

One method is to change the visibility of the <div id="slider"></div> with javascript inside a document.ready function to visible:

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

This of course means you have to specify that the display is none in the css document:

#slider {
    display: none;
}

Answer 2

Just add to <div id="slider"></div> height and overflow:hidden

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

}