Javascript にて new Image() がうまく動かない時の対応

Javascript にて Image オブジェクトを扱う時、画像をうまく読み込んでくれない時がある。

let image = new Image()
image.src = 'https://sample.com/img/smaple.png'
console.log(image)

上記のように src 部分を外部 URL から読み込む場合にタイムラグが発生して、
画像を上手く読み込めなかったりする。

addEventListener を使う

load イベントを使うことによって、
画像の読み込み後にイベント発生させ、
その後に処理を行えるようになる。

let image = new Image()

image.addEventListener('load', function() {
	console.log(image)
}

image.src = 'https://sample.com/img/smaple.png'