2

ajax リクエスト中にユーザーにスピナーが表示されるようにします。私のスピナーは Firefox 13 で完全に動作します。ただし、Chrome と IE9 では動作しませんが、私の ajax リクエストにはかなりの時間がかかります。1.2秒くらい。

$('#fileManager').on('click', '.navSpan', function() {

    /* show spinner */
    $('.fileManager-spinner').show();

    /* synchronous  ajax fetch and manipulation goes here */

    /* hide spinner when done */
    $('.fileManager-spinner').hide();
}

行を削除する$('.fileManager-spinner').hide();と、表示され、Chrome と IE でも回転し始めます。ただし、その線が存在する場合は、表示されません。

または、コードをデバッグして と の間で実行を一時停止する.show()と.hide()、画面にも表示されたままになります。しかし、先ほども言ったように、通常の状態ではスピナーを見ることは不可能です。

これがスピナーです。

<div class="fileManager-spinner" style="display: none;"></div>

以下はスピナーCSSです。

.fileManager-spinner
{
    position:relative;
    top: 50%;
    left: 50%;
    margin-left: -50px; /* half width of the spinner gif */
    margin-top: -50px; /* half height of the spinner gif */
    text-align:center;
    z-index:1234;
    overflow: auto;
    width: 100px; /* width of the spinner gif */
    height: 102px; /*hight of the spinner gif +2px to fix IE8 issue */  
    background-image: url(../../Images/fileManager/loader/loaderBig.gif);
    background-repeat:no-repeat;
}

何が問題なのですか?

ありがとう。

4

3 に答える 3

2

ここで示したことから、同期 ajax クエリを実行していると思います。このクエリの間、Chrome のエンジンは JavaScript スレッドを離れず、画面を更新しません。

非同期 ajax リクエストを使用し、コールバックでスピナーを単純に削除する必要があります。

同期 ajax クエリは、次のバージョンの jquery (1.8) で非推奨になることに注意してください。

使用できます

// show spinner
$.ajax({
  url: "http://fiddle.jshell.net/favicon.png",
  // some things
}).done(function ( data ) {
  // remove spinner
});

jquery ajax done、always および fail functionsを参照してください。

于 2012-07-12T13:27:56.017 に答える
1

Ajax はノンブロッキングであるべきです。Ajax リクエストが返された後に実行される関数で非表示を実行する必要があります。

そう...

$.ajax(...).done(function(){ $(".fileManager-spanner").hide(); });

動作するはずです。

于 2012-07-12T13:32:14.340 に答える
0

呼び出しに組み込みsuccessパラメーターを使用して$.ajax、呼び出しが正常に返されたときに関数を実行します。

同期呼び出しを使用している特定の理由があるかどうかはわかりませんが、そうでない場合は、非同期呼び出しに切り替えることをお勧めします。

于 2012-07-12T14:39:18.817 に答える