2

私の JavaScript コードでは、最初に関数を呼び出して画像を更新しています。

document.getElementByID("i1").src = newImage;

次に、いくつかのステートメントの後で、メッセージを表示するために alert() 関数が呼び出されます。

alert("image updated!");

ただし、このコードを実行すると、実際には、画像が更新される前にアラート ボックスが表示されます。ダイアログの [OK] ボタンをクリックしてアラート ボックスを削除すると、画像が更新されます。

これらのイベントの順序が保持されないのはなぜですか? また、警告ダイアログが表示される前にイメージの更新が完了するのを待つために呼び出すことができる同期関数はありますか?

私は何らかの方法でコードを再構築することにオープンです (つまり、alert() 関数以外のものを使用します) が、既存のコードが意図したとおりに動作できるようにするソリューションを好みます。

4

3 に答える 3

4

画像の読み込みは非同期です。必要なのは、画像が読み込まれたときのコールバックです。

jQueryを使用している場合は、次のように実行できます。

var img = $('#i1');
img.load(function() {
    alert('image updated!');
});
img.src = newImage;

Prototypeを使用している場合は、次のように実行できます。

var img = $('i1');
Event.observe(img, 'load', function(e) {
    alert('image updated!');
});
img.src = newImage;

いずれの場合も、最初にコールバックを定義してから、イメージsrcを設定することが重要であることに注意してください。

于 2010-10-26T18:45:23.713 に答える
3

単純。

画像の src プロパティを設定すると、画像の読み込みが開始されます。ただし、読み込みは非同期で行われるため、読み込みが完了する前に警告ボックスが表示されます。

于 2010-10-26T18:42:40.650 に答える
0

警告ボックスは、バックグラウンドでの画像の更新をブロックします。ブラウザが行うのは画像のダウンロードです (wireshark などでこれを見ることができます) が、JavaScript が実行されている間、ブラウザは Web ページ上で何も変更しません。計算量の多い JavaScript メソッドがある場合は、WebWorkers を使用してみてください。

于 2010-10-26T18:44:32.497 に答える