1

gif画像の読み込み/待機を含むdivを表示および非表示にしています。私が呼び出すボタンをクリックする$("#div").show()と.hide()、クリック機能の最後に。しかし、画像は一般的に表示されていません。線の横にブレークポイントを置く.show()と、画像が表示されます。

私も試し.css("display","")ましたが、うまくいきませんでした。

他の方法を提案するか、何が問題になる可能性があるか教えてください。

ありがとう。

私のコードは以下のようになります

$("#button").click(function(){

   $("#div").show(); // showing image so that user will know that a process is going on.

   //other working code

   $("#div").hide();   // hiding will indicate process completion
});
4

3 に答える 3

2

同じ関数呼び出しでアニメーションなしでshowとhideを呼び出しています。これは同期的に行われるため、JavaScriptはシングルスレッドであるため、2つの関数呼び出しは同じスレッドで行われます。ブラウザが表示を更新する前に同じスレッドで表示および非表示になるため、変更にまったく気付くことはありません。ある種の非同期呼び出しがあった場合はそれが表示されますが、何も表示されていないようです。

最初のショーの後にすべての作業コードをsetTimeout内に置くことで、それを偽造することができます。

$("#div").show();
setTimeout(function(){
    ...other working code
    $("#div").hide();
}, 100);

これにより処理が100ミリ秒遅れますが、処理が開始されると、作業コード部分が完了するのに1秒かかる場合、JavaScriptの実行中はアニメーションの表示を実行できないため、アニメーションGIFは実際にはアニメーション化されません（ブラウザのシングルスレッド動作）。

于 2013-02-05T05:57:58.697 に答える
2

Javascriptはシングルスレッドであり、UIレンダリングとスクリプト実行のために同じスレッドが共有されます。ブラウザが最適化を行う方法が原因で、show（）およびhide（）効果は表示されません。

JQueryのpromiseメカニズムを利用して問題を解決することができます。ここでの例

このようにする代わりに

1）DIVを表示する

2）いくつかのコードを実行します

3）DIVを非表示にします

あなたはこれをやるでしょう

1）divを表示する

2）「show」が完了したら

           2.1) execute your code, 
           2.2) hide the DIV

ここでJSbinの動作例を作成しました

于 2013-02-05T06:15:16.650 に答える
1

ブラウザには非常に洗練された作業スタイルがあり、スクリプトの実行中は、スクリプトの実行後にすべてのインターフェイスの描画が遅れます。

したがって、あなたのコードでは、ブラウザはdivを表示しますが（正しいoffsetWidthとを取得できますoffsetHeight）、表示できません（描画が遅れているため）。

デバッガーはコードにブレークポイントを作成し、その場でブラウザーが画面へのすべての変更をフラッシュして、画像を表示できるようにしますalert()。呼び出しによって同じ効果が得られる可能性があります。

私の上記の状態は100％正しくありません。実際には、ブラウザはイベントループの下で動作しており、スクリプトの実行時にすべてのレイアウトと描画、およびその他の作業を遅らせるためですが、より正確なものが必要な場合は、質問に答えることができると思います。複雑な答え、もっと書いてよかったです:)

于 2013-02-05T05:47:52.927 に答える