13

javascript/jqueryを介してページを非同期にロードしている間、履歴APIを使用してきました。サイトが読み込まれていることをブラウザに伝えて、ブラウザが読み込み中の画像（Firefoxの回転するホイールのようなもの）を表示できるようにする方法を考えています。

編集：

もう少し詳しく言うと：

Web サイトにページをロードすると、URL が変更され、新しいコンテンツが表示されますが、Firefox は、ページがロードされていることを示す糸車をシグナルとして表示しません。

Facebook のタイムラインから画像を開くと、画像が読み込まれ、URL が変更され、Firefox が回転するホイールを表示して、画像がバックグラウンドで読み込まれていることを示します。

あの糸車も欲しい！

4

3 に答える 3

8

これらの質問で答えを見つけました：

AJAX でブラウザの読み込みをトリガーする方法

var i = $('<iframe>');
console.log(i);
i.appendTo('body');
function start() {
    i[0].contentDocument.open();
    setTimeout(function() {
        stop();
    }, 1000);
}
function stop() {
    i[0].contentDocument.close();
    setTimeout(function() {
        start();
    }, 1000);
}

start();

ソース: jsFiddle

このスクリプトは、ajax.start & ajax.stop-event によってトリガーされる iframe を作成します。

于 2012-11-13T12:39:30.717 に答える
0

非同期リクエストは、何かがロードされていることを認識しています。イベントを自分で別の場所に広める必要があります。たとえば、beforeSend フックを使用すると、次のようになります。

$.ajax('/your_stuff', 
       beforeSend: function() {
         $(document).trigger('loading');
       }
       ....)

その後：

$(document).on('loading', function() { alert("request is loading");}

history API で URL を更新すると同時に、イベントをトリガーすることをお勧めします。

于 2012-11-13T08:48:27.063 に答える
-2

タグから、AJAX に jQuery を使用していると思います。のようなグローバル AJAX ハンドラーを使用できます$.ajaxStart()。$.ajaxComplete()これらは、コード内で ajax メソッドを呼び出す場所に関係なく起動します。

$('#myLoadingDiv').ajaxStart(toggleLoading).ajaxComplete(toggleLoading);

function toggleLoading(){
   $(this).toggle();
}

API リファレンス http://api.jquery.com/ajaxStart/

あなたの質問の言い回しから、実際のブラウザタブ自体で読み込み中の画像を制御できるようにしたいと思います。あなたはそれを制御することはできません。ページ内で独自の画像やテキストを使用すると、ユーザーからの視認性も向上します

編集id=myLoadingDivこのコードが機能するには、要素に独自の読み込みアニメーションを提供する必要があります

于 2012-11-13T08:56:39.847 に答える