javascript - 画像オブジェクトに src を設定する前に onload 関数を設定する必要がありますか?

Question

画像オブジェクトonloadに設定する前に関数を設定する必要があると言われました。srcSOでこれを検索しました。

私はこのコードを見つけました：

var img = new Image();
img.src = 'image.jpg';
img.onload = function () {
    document.body.appendChild(img);
};

しかし、ほとんどの人は、前に次のようonloadに書くべきだと信じています。src

var img = new Image();
img.onload = function () {
    document.body.appendChild(img);
};
img.src = 'image.jpg';

この順序で書かなければなりませんか? 上記のコードでエラーが発生する場合 (画像が大きすぎる場合など) はありますか?

誰かが私にいくつかの例を示すことができれば、私は非常に感謝しています.

score 9 · Accepted Answer

必須ではありませんがsrc、ハンドラーがアタッチされる前にと画像が読み込まれると、起動しません。

JavaScript は非同期で動作します。を設定するsrcと、Web ブラウザはメインの実行フローの外でイメージをロードします。onload操作が完了した時点でが設定されていない場合- 設定srcとの間にある可能性がありonloadます。

score 5 · Accepted Answer

src に値を割り当てるとすぐに、画像が読み込まれます。onload に達する前にロードすると、onload は起動しません。

すべての実装をサポートするには、src を設定する前に onload ハンドラを割り当てることを強くお勧めします。

最初にオンロードを設定する必要があるのは私の経験（21年以上のJS）です。特に、JSを使い始めたときに画像オブジェクトをサポートしていなかったIEでは特にそうです。

+"?"+new Date().getTime()キャッシュされた画像が起動しないという問題が発生した場合は、次回 src を設定するときに追加して、キャッシュを回避します。

これは、私が提案した順序も使用する MDN の例です。

score 2 · Accepted Answer

ブラウザーは、src を割り当てるとすぐに画像のダウンロードを非同期で開始するため、onload イベントハンドラーをアタッチする前にダウンロードが完了し、画像を DOM に追加するコードを起動しない可能性があります。

score 2 · Accepted Answer

画像がキャッシュされている場合、ほとんどのブラウザはすぐに load イベントを発生させます。ただし、Internet Explorer 7 ではまったく起動しません。そのため、最初に src を設定することをお勧めします。

5 に答える 5