アニメーション化されたインジケーター/スピナー GIF の表示と非表示は、アクションが機能し、アクションが完了するのを待っている間に何かが発生していることをユーザーに示す良い方法です。たとえば、アクションがサーバーからデータをロードする必要がある場合などです。 ) AJAX 経由。
私の問題は、速度低下の原因がプロセッサを集中的に使用する機能である場合、gif がフリーズすることです。
ほとんどのブラウザでは、プロセッサを大量に消費する関数が実行されている間、GIF のアニメーションが停止します。ユーザーには、実際には機能しているのに、何かがクラッシュまたは誤動作したように見えます。
JSBIN の例
注: [これは遅い] ボタンを押すと、プロセッサがしばらく拘束されます。私の場合は約 10 秒ですが、PC の仕様によって異なります。HTMLの「data-reps」属性を使用して、これをどの程度行うかを変更できます。
- 予想:クリックすると、アニメーションが実行されます。プロセスが終了すると、テキストが変更されます (通常はインジケーターも非表示にしますが、回転させたままにしておくと、例がより明確になります)。
- 実際の結果:アニメーションの実行が開始され、プロセスが終了するまでフリーズします。これは、何かが壊れているような印象を与えます (突然予期せず完了するまで)。
JS がプロセッサをビジー状態にしている場合にフリーズしないプロセスが実行中であることを示す方法はありますか? 何かをアニメーション化する方法がない場合は、静的なテキスト メッセージを表示してから非表示にする方法に頼りますLoading...。
最適化によって問題を回避するのではなく、プロセッサを集中的に使用するコードを使用している理由を誰かが疑問に思っている場合: それは必然的に複雑なレンダリングがたくさんあるためです。コードは非常に効率的ですが、実行内容が複雑であるため、常にプロセッサに負荷がかかります。ほんの数秒しかかかりませんが、それはユーザーを苛立たせるのに十分な長さであり、インジケーターが UX に良いことを示すために長い時間をさかのぼる多くの研究があります。
プロセッサを大量に使用する関数の gif スピナーに関連する 2 つ目の問題は、1 つの同期セット内のすべてのコードが実行されるまで、スピナーが実際には表示されないことです。つまり、通常、スピナーを非表示にするまでスピナーは表示されません。
- JSBIN の例。
- ここで見つけた簡単な修正の 1 つ (上記の他の例で使用) は、インジケーターを表示した後にすべてを
setTimeout( function(){ ... },50);非常に短い間隔でラップして、非同期にすることです。これは機能しますが (上記の最初の例を参照)、あまりきれいではありません。もっと良い方法があるはずです。
私が気付いていないプロセッサ集約型の読み込みのインジケータには、標準的なアプローチが必要だと確信しています-または、単にLoading...テキストを使用するのが普通setTimeoutですか? 私の検索では何も見つかりませんでした。似たような問題について 6 つまたは 7 つの質問を読みましたが、それらはすべて無関係であることが判明しました。
編集コメントにいくつかの素晴らしい提案があります。ここに、私の正確な問題の詳細をいくつか示します。
- 複雑なプロセスには、大きな JSON データ ファイルの処理 (ファイルのロード後のメモリ内での JS データ操作操作など) と、複雑で詳細なズーム可能な世界地図を含む SVG の視覚化のレンダリング (Raphael.js による) が含まれます。 JSON からのデータ処理。そのため、DOM 操作が必要なものもあれば、そうでないものもあります。
- 残念ながら IE8 をサポートする必要がありますが、必要に応じて、IE8 / IE9 ユーザーに
Loading...テキストのような最小限のフォールバックを提供し、他のすべての人に最新のものを提供できます。