Javascriptの処理中にGIF画像を表示する

Question

私はいくつかの長い（10-15秒）Javaスクリプトの実行を行っているアプリケーションを構築しています。この実行中にgifイメージを表示したい。私はgifの読み込みイメージを追加して、私はjavascriptの処理を開始する前に、表示するGIFイメージを含むdivのスタイルを設定します。ブロックとjavascriptの処理が完了したら、display：noneに戻します。私はgif画像apprearingを見ることができますが、アニメーションを表示されていません。それは固まっている。このGIFは読み込み中のアイコンです。

私のjavascript関数は、このアプローチで何か問題があります。この

function jsFunc(){ 
// set the div containg the image to display:block 
elmDivGif.style.display="block"; 

Here comes my operation which will take 10-15 secons to finish 

// setting the image style to none 
elmDivGif.style.display="none"; 
} 

ようsomethngに見えます。私はgifアニメーションとjsの両方が実行するために同じスレッドを使用しており、一度に1つしか利用できないと感じています。

アドバイスをしてください。

Answer 1

ブラウザのレンダリングプロセスが実際にJavaScriptコードが実行されているスレッドと同じスレッドにあるため、Gifはアニメーションを表示しません。あなたがしようとしていることを達成するには、Web Workersを使用する必要がありますが、まだすべてのブラウザでサポートされているわけではありません。

Answer 2

javascriptとアニメーションgifを同時に実行したい場合は、JavaScriptコードに改行が必要です。これは、それを複数の機能に分割し、約10ミリ秒の遅延でsetTimeoutを使用して各機能を呼び出すことによって達成することができる。

Answer 3

setTimeoutを使ってjavascript処理中に自分のgifアニメーションを表示するのに成功しました。ディスプレイを動かさないように十分小さなバーストで処理し、他のクリックイベントなどを許可しました。あなたのプロセスそうしていますので、私はあなたがそれを少なくともミリセカンド以下のグループに分割することができると推測しています。

setTimeoutコールの間に、forループの10,000回の反復が10msの遅延でスイートスポットと判明しました。ユーザーが経験した合計時間は、ページとやりとりすることができ、作業が完了していることを示すアニメーションを観察できるため、より忍耐強く感じるため、短く感じることになります。これは、できるだけ早く達成されたアクションを取得するスタックページよりはるかに望ましいと思われます。

setTimeoutの間の繰り返しの回数は、各反復の所要時間に依存します。反復回数を最大限にしようとすると、コンピュータの速度が遅くなると別のエクスペリエンスが生じる可能性があることに注意してください。ここで

は、私のアプリケーションがよりスムーズにやり取り作られた擬似コードです：私が気づい

masterArray = populateMasterArray(); 
processInteractively(0, masterArray, ...); 
function processInteractively(i, masterList, ...) { 
    if (masterList.length > i) { 
     for (var x=0; x < 10000 && masterList.length > (i+x); x++) { 
      var tempI = i + x; 
      //...process this tempI iteration 
     } 
     i += x; // Lastly update i with however many iterations were processed 

     // Wait 10 milliseconds to continue processing; allowing the 
     // browser time to compose itself and display a gif animation 
     setTimeout(function() { 
      processInteractively(i, masterList, ...); 
     }, 10); 
    else { 
     outputResults(...variablesBuiltDuringExecution); 
    } 
} 

ことの一つは、あなたのループカウンタが「高すぎる」であればアニメーションは、「立ち往生」それを見ていてもということでしたアニメーションを再開できるときはいつでも、独自のタイムラインに従ってアニメートし、適切な外観にジャンプします。それゆえに、アニメーションにおいて若干の（またはごくわずかに知覚できない）一時停止を有することは、審美的に許容され、作業が行われていることを伝える可能性がある。