1

HTML5キャンバスを使用しています。canvas 要素内にサイズ 7MB の画像をロードしました。私のページには、ConvertImage ボタンがあります。

var imageUrl;
$("#ConvertImage").click(function() {
  $("#Spinner").show();
  imageUrl = $("#canvas")[0].toDataURL("image/png;base64;");
});

スピナーはアニメーション GIF です。次のステートメントで imageUrl を取得しようとすると、Spinner がすぐには表示されないことがわかりました。2 番目の操作がなければ、スピナーはすぐに表示されます。toDataURL() 操作が完了した後にスピナーが表示されるように感じます。

toDataURL() 操作の前に show() 関数が実行されるため、これは奇妙です。

この問題を解決するにはどうすればよいですか?

4

2 に答える 2

1

あなたの問題は、次の質問で説明されている問題と非常に似ていると思います: innerHTML can't be trusted: Does not always execute synchronously .

基本的に、DOM の更新は実際には「同期」ではありません。つまり、スピナーを表示するリクエストは、現在のコードが終了した後にのみ発生します。

JavaScript の実行はシングル スレッドであることを覚えておく必要があります。そのため、コストのかかる計算は UI をフリーズさせるだけです。スピナーを表示することは、AJAX リクエストのような長い非同期操作を行う場合には意味がありますがtoDataURL、UI が完了する前に更新される機会がないため、同期操作をブロックする場合には意味がありません。

長い同期コードを実行する必要がある場合は、Web Workers を参照してください: http://www.html5rocks.com/en/tutorials/workers/basics/

于 2013-09-24T01:41:22.027 に答える