現在のページを変更せずに、ブラウザーのスロバー (ページ読み込みインジケーター) を開始および停止する簡単な方法はありますか? できれば、外部ライブラリや AJAX 呼び出しを使用しないでください。
3 に答える
いいえ。ajax呼び出しなどを実行して強制的にスピンさせることはできますが、実行しないでください。ブラウザのその部分はあなたのためではありません、それはブラウザのためです!
これは、タイムマシンを含むゲームがより現実的になるように、システムクロックを変更できるかどうかを尋ねるようなものです。
簡単なサーバー側スクリプトを呼び出すことができます。これを「sleep.cgi」と呼びましょう。これは実行を停止 (スリープ) し、非表示の iframe 内の単純な自動リロード ページの配信を遅らせます。これにより、ほとんどすべての主要なブラウザーで、いわゆる「ブラウザー スローバー」 (ページ読み込みインジケーター) が表示されるはずです。throbber を表示したい理由が何であれ、完了したら、前述の iframe の場所を空の文字列にリセットするだけです。これは私がそれを行う方法です:
1) ブラウザのページ読み込みタイムアウトの壁にぶつからないように、要求を受け取って最大 30 秒間実行を停止する単純なサーバー側スクリプトを作成します。スリープ期間が終了すると、このサーバー スクリプトは次のような応答を返します。
<html><body onload="location.reload();"></body></html>
ブラウザに「ページ読み込み済み」インジケータを表示させるまで、強制的にループさせます。
2) 要求に応じて「throbber」を開始および停止し、使用する HTML 要素を追加するサポート JavaScript 関数を記述します。
<script>
function startThrobber(){
document.getElementById('throbberFrame').src='sleep.cgi?'+Math.random();
}
function endThrobber(){
document.getElementById('throbberFrame').src='';
}
</script>
<div id="throbberWrapper" style="display:none;visibility:hidden;">
<iframe id="throbberFrame" style="width:1px;height:1px;"></iframe>
</div>
Chrome/IE/Opera/Firefox で簡単なテストを行ったところ、問題なく動作するようです。しかし、私はそのようなことをする必要はありませんでした。
編集: Web サーバーが PHP スクリプトをサポートしている場合、sleep 関数のリファレンスは次のとおりです: http://php.net/manual/en/function.sleep.php次の行:
<html><body onload="location.reload();">
<?php
// sleep for 29 seconds
sleep(29);
?>
</body></html>
乾杯!
CPU を大量に消費するものが読み込まれると UI がフリーズするため、アニメーション GIF やプログレス バーが表示されることはありません。
XY 問題があります。setTimeout を使用して CPU を集中的に使用する操作を小さなチャンクに分割することで、ブラウザーのフリーズを防ぐことができます。ブラウザーのスロバーは、ネットワークから何かが読み込まれていることを知らせる UI 要素です。他の理由で使用した場合、非常に混乱します。