画像はのdocument.getElementByIdを使用して更新される前に、なぜJavaScriptの警告メッセージが表示されますか？

StackOverflow https://stackoverflow.com/questions/4026868

質問

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

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

その後、いくつかの文を後に警戒（）関数は、メッセージを表示するために呼び出されます：

alert("image updated!");
私はこのコードを実行すると、しかし、どのような実際に起こることは、の画像が更新される前に警告ボックスがをポップアップされていることです。私は、画像の更新、警告ボックスのダウンを取るために、ダイアログで「OK」ボタンをクリックすると。

なぜ、これらのイベントの順序は保持されていませんか？そして、機能を同期させるいくつかの種類が警告ダイアログが表示される前に、私は完全に画像の更新を待つために呼び出すことができますがありますか？

I（すなわち、警戒（）関数以外のものを使用して）いくつかの方法でコードを再構築するオープンなんだけど、私が意図したとおりに機能するように、既存のコードを可能にするソリューションを好むと思います。

役に立ちましたか？

解決

画像の読み込みは非同期です。何が必要画像がロードされたときのコールバックです。

あなたはjQueryのを使用している場合、あなたはこのようにそれを行うことができます：

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

あなたはプロトタイプを使用している場合、あなたはこのようにそれを行うことができます：

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

のいずれかの場合には、それはあなたが最初のコールバックを定義することが重要だと注意し、画像srcを設定します。

他のヒント

シンプルます。

は、画像のsrcプロパティを設定すると、画像の読み込みを開始します。しかし、ロードがasynchroneously起こることから、ロードが完了する前に警告ボックスが表示されます。

警告ボックスブロック、背景画像の更新。どのブラウザが行うことは、画像のダウンロードです（あなたがwiresharkのか、似たようでこれを見ることができる）が、JavaScriptの実行中のブラウザは、Webページ上では何も変わりません。あなたは計算集約JavaScriptのメソッドを持っている場合は、WebWorkersを使用してみます。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top