2

動的なWebサイト用に読み込み中の「animation.gif」を作成しました。これは、スピナーを表示および非表示にするためにjqueryから使用したコードです。

$("#loading").bind("ajaxSend", function(){
   $(this).show();
 }).bind("ajaxComplete", function(){
   $(this).hide();
 });

http://docs.jquery.com/Ajax_Events

私の問題： Webサイトのコンテンツ（フラッシュ、画像、テキストなど）が異なります。そのため、ウェブサイトの一部は他の部分よりも読み込みに時間がかかります。ただし、アニメーションの読み込み時間は常に同じです（速すぎます）。flash（4mb）とhtmlテキストを含むコンテンツをロードすると、スピナーの非表示が速すぎて、コンテンツはまだロードされています。HQ画像でも同じです。

次のように、最小遅延を使用できます。

$("#this").delay(600).fadeOut("slow");

しかし、これが良い解決策だとは思いません。 コンテンツ全体が読み込まれるまで、読み込みスピナーを非表示にしないようにするにはどうすればよいですか？

4

3 に答える 3

1

できることは、ページ内のすべての読み込みが遅い要素のフラグのリストを作成することです。

次に、各要素の読み込みイベントのリッスンを開始します (フラッシュでも実行できます)。

要素が読み込まれるたびに、そのフラグを立てます。

このリストを監視するバックグラウンドでインターバルを実行し、すべてのリスト項目が発生したら、loading-spinner を削除します。

これを試すこともできます：

var iv = setInterval(function () {
    if (document.all["theObject"].readyState == 4) {
        clearInterval(iv)
        alert("Object loaded (maybe).")
    }
}, 100)

から取得: http://www.webdeveloper.com/forum/showthread.php?160792-lt-object-onload、

オーク・スコーチャー

于 2012-10-21T07:27:40.090 に答える
0

リンクしたページから、必要なロジックが組み込まれ、任意のグループの最初のAJAXリクエストに対してのみ起動し、最後のAJAXリクエストが完了したときにajaxStartバインドするだけです。ajaxStop

または、独自のカウンターを使用して、未処理のAJAXリクエストの数を把握することもできます。

(function(sel) {
    var count = 0;

    $(sel).bind("ajaxSend", function() {
        if (count++ === 0) {
            $(this).show();
        }
    }).bind("ajaxComplete", function() {
        if (--count === 0) {
            $(this).hide();
        }
    });
})('#loading');
于 2012-10-21T07:37:08.517 に答える
0

わかりました、これを試してみました(Fiddle Here)希望はあなたが探しているものです。

基本的：

  • .contentローダーにクラスを待機させる各要素を指定します
  • jQuery/AJAX を使用して content src を動的に設定する
  • $('.content')要素を.load()イベントにバインドする
  • が起動されたときに.load()カウンターをインクリメントし、カウンターが.lengthof$('.content')セレクターと等しい場合は、読み込み中の gif を非表示にします

.load() イベントに関するjQuery サイトから:

このイベントは、URL に関連付けられた任意の要素 (画像、スクリプト、フレーム、iframe、および window オブジェクト) に送信できます。

したがって、怠惰なコンテンツでうまく機能するはずです。

それが役に立てば幸い！

于 2012-10-21T08:55:59.857 に答える