JavaScriptのonabort・onerrorとは？画像読み込み中断・失敗時のイベント処理を解説

onabort と onerror は、画像が正常に読み込めなかった場合に発生するイベントです。
画像の読み込み中断やエラー発生時に処理を実行したい場合に利用します。

onabortイベントとは？

onabort は、画像の読み込みが途中で中断されたときに発生するイベントです。
ユーザーが読み込みをキャンセルしたり、ネットワークの問題で読み込みが止まった場合などに利用できます。

// 1番目の画像の読み込みが中断されたら retry() を実行
document.images[0].onabort = retry;

→ 必ず画像を表示させたい場合などに、再読み込み処理を行うことができます。

onerror は、画像ファイルが存在しない・壊れているなどの理由で
画像の読み込みに失敗したとき に発生するイベントです。

→ 画像が見つからない場合にユーザーへ通知できます。

イベント	発生タイミング
onabort	読み込みが途中で中断されたとき
onerror	読み込みに失敗したとき（ファイルなし・破損など）

→ どちらも画像読み込みに関するエラー処理に役立ちます。

手を動かしながら JavaScript を学びたい方には、初心者向けにやさしく解説された実践型の入門書があります。
実際に動くサンプルを使って学べるため、基本をしっかり身につけたい方に最適です。
→　いちばんやさしい JavaScript の教本

JavaScriptの基礎を体系的に学びたい方には、こちらの書籍がとても分かりやすくおすすめです。
初心者がつまずきやすいポイントを丁寧に解説している入門書です。
→　確かな力が身につくJavaScript「超」入門

JavaScript を独学で学んでいると、「もっと効率よく理解したい」「プロに質問しながら進めたい」と感じる方も多いです。
そのような方には、未経験からエンジニアを目指せる DMM WEBCAMP の学習コースも選択肢のひとつです。

無料相談では、学習ロードマップの作成やキャリア相談など、独学では得られないサポートを受けられます。
短期間で基礎を固めたい方や、効率よくスキルを身につけたい方に最適です。
→ DMM WEBCAMP 学習コース（無料相談はこちら）

このブログは Xserver 上の WordPress で運用しています。
表示速度が速く、安定しているのでブログ初心者にもおすすめです。
レンタルサーバーエックスサーバー