javascript - JavaScript での画像の読み込みはどのように機能しますか?

Question

js での画像読み込みの構造は次のとおりです。

var img = new Image();
img.onload = function(){
    //do something
}
img.src = "path to image";

オブジェクトに文字列を割り当てた後、何らかのイベントがトリガーされるという、これが機能する方法に興味があります。誰かが私にそれを説明できますか？

score 3 · Accepted Answer

Imageブラウザによって実装が提供される特別なオブジェクト (仕様ではホストオブジェクトとして知られています) です。コンストラクターは実際には new を返していHTMLImageElementます。

内部的には、srcプロパティにはセッター関数があります。を設定するsrcと、ブラウザはバックグラウンドで画像の取得を開始します。(これが発生する正確なメカニズムは、ブラウザーによって異なります。)

画像のリクエストが正常に完了すると、ブラウザはloadイベントを発生させます。(失敗した場合、errorイベントが発生します。)

score 0 · Accepted Answer

srcオブジェクトのプロパティに文字列を割り当てるとImage、ブラウザは、その文字列にあるはずの URL で指定されたサーバーから画像のリクエストを送信します。

有効な画像を含む応答がサーバーから返されると、loadイベントがトリガーされ、onloadイベントハンドラーが呼び出されます。

2 に答える 2