0

私は、Web アプリにすべてのコンテンツを挿入するために使用している 100 以上の ajax 呼び出しを含む Web アプリを構築しています。

ページを非表示にして、すべての ajax 呼び出しが完了するまで ajax スピナーを表示する方法を見つけたいと思っていました... および/またはアプリ全体が読み込まれてから、サイトを表示します。

そうしないと、ユーザーがページをナビゲートすることができ、A. 正しくレンダリングされない可能性があります。または、B. 完全にロードされたときにサイトがホームに更新されたときにナビゲーションの途中になる可能性があります。

ソリューションの根性に出くわしましたが、実装方法がわかりません。または2つを一緒に...大学のプロジェクトはプロからはほど遠いですが、これらは有望に見えました...

https://stackoverflow.com/a/14038050

 $(document).ajaxStop(function () {
      // $.active == 0 
  });

https://stackoverflow.com/a/12313138/2676129

$(document).ajaxStart(function() {
    $.mobile.loading('show');
});

$(document).ajaxStop(function() {
    $.mobile.loading('hide');
});

どうすればこれを機能させることができますか? 私のajax呼び出しは、多数の.jsファイル（アプリのさまざまなセクション）で参照されています

助けてくれてどうもありがとう！

編集: 使用される ajax 呼び出しの例

$.ajax(
        {
            url: "http://myurl",
            type: 'get',
            dataType: 'jsonp',
            success: function(data)
            {
                if (data.result == 'success')
                {
                    var previousPageID = "";
                    var currentPageID = "";
                    $.each(data.data, function(key, data)                 //scans through each Lv1 Category, creates a button and page and links thems.
                    {
                        var divLabel = data.label;
                        var pageID = currentPageID + data.label.replace(/\s/g, "");
                        $('#contentPage').append(generateButtons(pageID, divLabel));                                                       //generates a normal button for a category from CMS and generates the relevant page to link to.
                        var previousPageID = currentPageID;
                        generateNextPage(data, previousPageID);
                    });
                    $("#Page").trigger("create");                                              //once html is injected into home <div> applies jquery mobile styling and effects (enhance)
                }
            }
        });
4

2 に答える 2

10

より単純な解決策を指摘したかっただけですが、効果的です。このロード div をページに追加する必要があります。

<div id="loading"></div>

その後、次のようにして、ajax 呼び出しがそれぞれ開始および停止するたびに、この div が表示または非表示になるようにします。

    $(document).ajaxStop(function () {
        $('#loading').hide();
    });

    $(document).ajaxStart(function () {
        $('#loading').show();
    });

最後に、次の CSS を追加して、ブロックされた UI 要素のように div が全画面表示されるようにします (これは、ページがスピナーの代わりに何か / を読み込んでいることを示しています)。

#loading {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,.5);
    -webkit-transition: all .5s ease;
    z-index: 1000;
    display:none;
}

JSFIDDLE のデモはこちら

于 2015-03-14T05:56:29.877 に答える
2

1 つのアプローチは、最初のページとページの読み込みの一部として読み込みアニメーションを表示することです。

次に、未処理の ajax 呼び出しがゼロになるまで待ち、ゼロになったら、読み込みアニメーションを非表示にします。

ドキュメントの準備は次のようになります。

$(document).ready(function() {
    $('#spinner').addClass('spin');

    function stopSpinner() {
        $('#loading').addClass('hide');
        $('#loading').one('webkitTransitionEnd', function() {
            $('#loading').hide();
        });
    }

    $(document).ajaxStop(function () {
        // $.active == 0 
        stopSpinner();
    });
});

マークアップは、本文の最後の要素として次のようなものになります。

<div id="loading">
    <div id="spinner"></div>
</div>

このようなスタイルで：

#loading {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,.5);
    -webkit-transition: all .5s ease;
    z-index: 1000;
}

#loading.hide {
    opacity: 0;
}

#spinner {
    position: absolute;
    width: 100px;
    height: 100px;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
    background-color: yellow;
    -webkit-transition: all 1000s linear;
}

#spinner.spin {
    -webkit-transform: rotate(100000deg);
}

非常に長い遷移時間と大きな回転は、永遠のアニメーションをシミュレートするためにあります。これを CSS3 アニメーション、アニメーション GIF などに置き換えて、必要な効果を得ることもできます。

デモ フィドル(注: setTimeout を使用してコールバックを偽造し、ローダーを非表示にするだけです)

于 2013-08-28T23:14:19.120 に答える