JavaScriptでの画像の非同期読み込み

JavaScriptを通じて動的に生成される画像も、非同期に読み込まれます。例として次のコードを見てみましょう：

let image = document.createElement('img');
image.src = 'img.png';
document.body.appendChild(image);

ご覧の通り、ここではimgタグを作成し、そのsrcに画像へのパスを設定し、この画像をbody内に配置しています。しかし、画像はすぐにはページに表示されません。 srcに画像へのパスを設定した時点で、ブラウザはサイトからその画像のダウンロードを開始します。画像がダウンロードされて初めて、ブラウザはそれを表示できるようになります。

画像が十分に大きく、インターネットの速度が十分に遅い場合、サイトのユーザーは、画像が読み込まれるまでしばらくの間、空の画像を「鑑賞」することになります。

実際、imgタグには画像の読み込み完了時に発生するイベントloadが存在します：

let image = document.createElement('img');
image.src = 'img.png';

image.addEventListener('load', function() {
	// 画像の読み込み時に実行される
});

これを使って、画像が読み込まれた時だけページに画像を配置することができます：

let image = document.createElement('img');
image.src = 'img.png';

image.addEventListener('load', function() {
	document.body.appendChild(image); // 読み込み完了時に配置する
});

画像が必ずしも読み込まれるとは限りません：画像へのパスが間違っている場合や、インターネットの切断、サイトのサーバーの故障などが発生する可能性があります。言い換えれば、例外的な状況です。この場合、イベントloadではなく、イベントerrorが発生します：

let image = document.createElement('img');
image.src = 'img.png';

image.addEventListener('load', function() {
	document.body.appendChild(image);
});
image.addEventListener('error', function() {
	// 画像読み込みエラー
});

ボタンを作成し、クリックすると画像が読み込まれるようにしてください。画像が読み込まれたら表示し、画像の読み込みに問題がある場合はメッセージを表示してください。