0

この形式の画像のグループがあります。

<ul id="photo-list">
  <li><img src="" /></li>
  <li><img src="" /></li>
  <li><img src="" /></li>
</ul>

私の目標は、すべての画像の読み込みが完了すると、 #photo-list がフェードインすることです。また、画像が読み込まれる前に読み込みアニメーションを表示したいと思います。どんな助けでも大歓迎です！

4

2 に答える 2

0

これはあなたの目的のために過度に単純化されているかもしれませんが、ページが画像のリスト以外にほとんど構成されていない場合は、単純に使用できます

$(window).load(function({ ... });

この関数内のコードは、ページのコンテンツ全体が読み込まれるまで実行されません。そのようなコードの実行を遅らせる可能性のある他のコンテンツがページにある場合は、読み込まれる各画像のフラグをトリップし、すべてのフラグが true に設定されたらコードを実行するという点で、MiracleMan に同意します。

于 2010-03-14T13:51:01.777 に答える
0

表示する前に、すべてがロードされるのを待ちたい理由が少し気になるようです。コンテンツをすばやくアップすることは、視聴者を維持するために重要です。

しかし、これを行います：

構造物:

<div id="写真">
   <img src="yourloading.gif" />
   <ul id="フォトリスト">
      <li><img src="" /></li>
      <li><img src="" /></li>
      <li><img src="" /></li>
   </ul>
</div>

次に、デフォルトのスタイル:

#写真リスト { 表示: なし; }

次に、あなたのjQuery

$(document).ready(function () {
    $("#photo-list li img:last").onload(function () {
         $("#写真一覧画像").hide();
         $("#フォトリスト").fadeIn();
    }
}

もちろん、これは最後の画像が読み込まれたかどうかを検出するだけであり、画像のサイズによっては、他の画像が読み込まれない競合状態が発生する可能性が最も高くなります。おそらくより良い方法は、jQuery の data メソッドを使用して onload イベント中にフラグを設定し、すべての画像にそのデータビットが設定されているかどうかをテストしてから、非表示とフェードインをトリガーすることです。

イメージ サイクリングをしばらく実行したい場合は、jQuery サイクル プラグインを使用して、UL 内のイメージを非表示にし、cycle に表示させます。私は私の写真のウェブサイトでサイクルを使用していますhttp://www.robmiracle.com

于 2010-03-13T22:02:18.063 に答える