1

私はこれについて本当に混乱しています。Bootstrapのカルーセルを使用するテストサイトに適度に動的なページがあります（ただし、それが私のコードであり、彼らのコードではないことを望んでいます。それは間違っています）。

テストページはここにあります：http：//bit.ly/ZjLl19

お気づきのことは次のとおりです...

  • ページの読み込みが開始されます
  • スタッフのポートレートが表示され始めます
  • その後...約5〜10秒間何も起こりません
  • 5〜10秒後、カルーセルがスタッフの経歴と大きな肖像画とともに表示されます

なぜこの遅延があるのですか？Webkitデバッガーを調べたところ、DOMContentLoaded実行中、他の何かが発生する前に、タイムラインにアイドル時間が表示されています。何か案は？

ありがとう！

4

3 に答える 3

2

注意点：

1）initでカルーセルを一時停止しました。これは最初の一時停止を説明するかもしれません。カルーセルオートは次のスライドに進み、デフォルトの遅延（明らかに5000ms）の後の後続のスライドを表示します。

$('.carousel.paused-by-default').carousel('pause');

2）一時停止したカルーセルは、最初の一時停止後に、次のコードを使用して表示されます。

info = setTimeout(function(){reveal_content();}, 500);

3）[更新-最初の2つの観測を無視する]

カルーセルはスライド-1から開始しているように見えます。スライド-1がないため、カルーセルの高さはにとどまります0px。カルーセルの高さは560px、最初のスライドがアニメーションを完了した後にのみ更新されます。これが、最初のスライドのアニメーションがない理由であり、デフォルトのスライド遅延である5000に加えて、約1秒の追加のアニメーション速度（ポイント＃1で説明）の後、どこからともなく飛び出しているように見えます。これを修正するには、以下の両方のソリューションを使用してください。

====================================

問題の解決に役立つ可能性のある方法：

1）関数の閉じ括弧の直前にこれを追加$(document).ready()して、最初のスライドをすぐに表示します。

$('.carousel').carousel(0);

2）前のポイントで問題が完全に解決されなかった場合は、高さを560pxに設定#mtt-carouselし.carousel-inner、これを＃1の前のJSステートメントの前に追加します。

$('#mtt-carousel, .carousel-inner').css('height', '560px');

またはCSS：

#mtt-carousel, .carousel-inner { height: 560px !important; }
于 2013-03-01T15:46:48.497 に答える
0

これは実際には簡単な修正です。アクティブなクラスを最初の要素（または最初に表示したい要素）に適用するだけです。それ以外の場合は、domが読み込まれ、カルーセルが初期化されてそれを実行するまで待機します。

したがって、以下は、JSを待たずに、トリックを実行してカルーセルをすぐに表示します。

<div class="carousel-inner">
    <div class="item mtt-item active">...</div>
    <div class="item mtt-item">...</div>
</div>
于 2013-03-01T15:14:45.197 に答える
-1

次のことをお勧めします：

  1. 画像のサイズを小さくします。

  2. cssファイルを1つに結合します。

  3. jsファイルを結合します。

  4. gzipcssおよびjsファイル。圧縮すると、ロード時間が大幅に改善されます。

  5. cssとjsを縮小し、これらのファイルの不要なスペースを削除すると、それらのサイズが小さくなります。

  6. リソースの有効期限と経過時間を指定することで、ブラウザのキャッシュを利用できます。

于 2013-02-22T08:38:12.577 に答える