2

別のページに向けられた「href」を含むリンク ボタンを押しているときに、読み込みバーを追加するにはどうすればよいですか?

バックエンド サービスはいくつかのリクエストを処理する必要があるため、新しいページが表示されるまでに約 10 秒かかることがあります。（リンクボタンを押して10秒くらいでページが反応しなくなったような状況です…）

リンク ボタンを押したときに、読み込みバー アクションを起動する必要があります。

ajaxstart、ajaxstop (ref: http://jsfiddle.net/jonathansampson/VpDUG/170/ ) を使用する方法を見つけましたが、私の場合に適していますか?

4

2 に答える 2

1

はい、あなたのケースにはAJAXが適しています。少し説明します。

  1. ユーザーがリンクをクリックした後、JavaScript を使用してページが読み込まれないようにします。jQueryコードでは、これは次のようになります。

    $('a').click(function(e){
    e.preventDefault();

    // save the destination of the link for the ajax request
    var destination = $(this).attr('href');
});

  2. ローディングバーを表示します。

    $('#loading').show();

  3. 次に、AJAX 要求をサーバーに送信します。

  4. サーバーはリクエストを受け取り、結果を計算してクライアントに送り返します。

  5. クライアント側の JavaScript がサーバーからの応答を取得したら、ページのコンテンツを置き換えます。jQuery では、応答が到着したときに実行されるコールバック関数を定義できます。

  6. 場合によっては、読み込みバーを非表示にします。

    $('#loading').hide();

jQuery を使用して単純化されたAJAX リクエストを実行することをお勧めします。時間を大幅に節約できます。

于 2012-10-02T09:58:40.797 に答える
0

最初にAJAXを使用してページをロードしていない場合は、単純です<a href="other-page">link</a>（そして、あなたの質問から、そうであると思います-私が間違っている場合は、sharethisの回答を参照してください。実際には、AJAX を使用して他のページをロードします)、ハンドラーを AJAX イベントにバインドしても、AJAX イベントがないため、必要なことは実行されません。

次のように書くことをお勧めします。

function loading () {
    $('body').addClass('loading');
    setTimeout(function () {
        $('body').removeClass('loading');
    }, 20000);
}

読み込みが遅いリンクのクリック ハンドラーにその関数をバインドしますが、既定のリンクの動作 (つまり、実際にリンクをたどる) を妨げることはありませんclass="slow"。

$('a.slow').click(loading);

またはすべてのリンクに対して：

$('a').click(loading);

これsetTimeoutは、サーバーが何らかの理由で応答しない場合に備えて、ユーザーがページを永久に使用できなくすることはありません。

ローディングスピナーが表示されている間はページを使用不可にしないことをお勧めします。これにより、サーバーが応答するのを待っている間、または待機する代わりに、ユーザーは他のことを自由に行うことができますが、それはあなた次第です. THIS DEMO (CSS のいくつかの変更を加えたフィドル) を参照して、私が何を意味するかを確認してください。

于 2012-10-02T10:40:16.453 に答える