1

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 セットアップを使用しており、このような問題は実際に発生したことはありません. それは可能ですか？

4

2 に答える 2

1

1 つの方法は<div id="slider"></div>、document.ready 関数内の with javascript の可視性を可視に変更することです。

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

これはもちろん、 が css ドキュメントにあることを指定する必要があることを意味しdisplayますnone。

#slider {
    display: none;
}
于 2012-11-13T22:20:28.567 に答える
1

高さとオーバーフローに追加するだけ<div id="slider"></div>です:hidden

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

}

于 2013-01-16T10:31:21.723 に答える