0

xml をループしてコンテンツを表示する JavaScript があります。完了するまでに約 3 ～ 5 秒かかります。それまでの間、読み込み中の gif を組み込みたいのですが、gif は JavaScript が完了するまでアニメーションを読み込みます。その頃には消えてしまいたい。(テスト目的で、GIF が実際に機能していることを確認するために非表示にはしませんでした。ヘルプが必要ないように、GIF コンテンツを表示および非表示にするために機能するものを以下に示します。

私の考えは、javascript を介して呼び出されたコンテンツが読み込まれているときに、読み込み中の gif 画像を表示する方法に関連していると思いますか? ボタンを使用して JavaScript を呼び出さない点は異なりますが、ページの読み込み時に呼び出されます。

.html で

<div id="loading"><img src="loading.gif"/>Starting Content</div>

.js で

function Loaded(quantity) {
  $(document).ready(function() {
        $("#loading").html("New Content");
  });
}

私が言ったように、アイデアはgifを表示/非表示にするために機能しますが、gifだけがアニメーションに失敗し、それを持つ目的が無効になります。:)

4

2 に答える 2

3

長時間実行されるJavaScriptジョブは、画像アニメーションを含むブラウザのUIをブロックします。これを実際に確認するには：

  1. http://www.ajaxload.info/にアクセスし、[Generate it！]をクリックします。GIFスピナーを作成します。

  2. i=0; while(i < 100000000) i++;ブラウザコンソールで実行します。ループが完了する間、画像はフリーズします。

これを防ぐには、Javascriptで説明されているように、ループに何らかの非同期コンポーネントを含める必要があります。重い作業を行っているときにブラウザがブロックされないようにする方法はありますか？（この質問は、実際には、その質問とほぼ同じです）：

for(var i=0; i < 1000000; ++i) {
    setTimeout(function(i) {
        return function() { doSomethingHeavy(i); }
    }(i), 0);
}

これにより、ループのステップがキューに入れられますが、JavaScriptスレッドがループの反復間で「休止」できるようになり、UIスレッドがGIFをアニメーション化できるようになります。

于 2012-12-31T15:01:04.433 に答える
1

重いジョブを別のスレッドで実行でき、メイン スレッドをブロックしない Web ワーカーで重いジョブを実行する必要があります。また、Chrome は適切にサポートしています。

于 2012-12-31T15:23:21.263 に答える