visibility - Foundation の Orbit 画像スライダーの画像をプリロードする方法は?

Question

Zurb の Foundation 4.1.5 (最新バージョン) を使用すると、Orbit 画像スライダーがうまく機能します。残念ながら、すべての画像が巨大な箇条書きリストとして表示される最初の数秒間は、実際に見えます。その後、JavaScript が作動し、すべてが美しくなります。

どうすれば最初の醜さを回避できますか? 画像をプリロードできますか? display: none準備が整うまで、または準備が整うまですべてを受け取ることはvisibility: hiddenできますか?

Answer 1

財団文書ごと

スタイルが設定されていないコンテンツの見苦しいフラッシュを停止するラッパー機能を追加することで、Orbit の初期化方法をクリーンアップしました。必要なマークアップは次のとおりです。

プリローダーを追加するには、次のように、ラッパー内に div class="preloader" を含めるだけです。

<div class="slideshow-wrapper">
      <div class="preloader"></div>
      <ul data-orbit>
        <!-- Orbit slides -->
      </ul>
    </div>

更新テスト済み: Foundation 4.2.1でテスト済み http://foundation.zurb.com/download.php

Fiddler を使用してダウンロード速度を調整しましたhttp://fiddler2.com/