この記事で分かること
onabort・onerrorイベントの役割と仕組み- 画像読み込み中断時に処理を実行する方法
- 画像読み込み失敗時に処理を実行する方法
onabortとonerrorの違い- エラー処理・再読み込み処理の基本
onabort と onerror は、画像が正常に読み込めなかった場合に発生するイベントです。
画像の読み込み中断やエラー発生時に処理を実行したい場合に利用します。
onabort イベントとは？
onabort は、画像の読み込みが途中で中断されたときに発生するイベントです。
ユーザーが読み込みをキャンセルしたり、ネットワークの問題で読み込みが止まった場合などに利用できます。
使用例：読み込み中断時に処理を実行
// 1番目の画像の読み込みが中断されたら retry() を実行
document.images[0].onabort = retry;
→ 必ず画像を表示させたい場合などに、再読み込み処理を行うことができます。
onerror イベントとは？
onerror は、画像ファイルが存在しない・壊れているなどの理由で
画像の読み込みに失敗したとき に発生するイベントです。
使用例：読み込み失敗時にメッセージを表示
<img src="sample.jpg" alt="" onerror="alert('表示できません。')">
→ 画像が見つからない場合にユーザーへ通知できます。
onabort と onerror の違い
| イベント | 発生タイミング |
|---|---|
onabort |
読み込みが途中で中断されたとき |
onerror |
読み込みに失敗したとき（ファイルなし・破損など） |
→ どちらも画像読み込みに関するエラー処理に役立ちます。
JavaScript 初心者におすすめの学習書籍
書籍で学ぶのが向いている人
- 紙の本で体系的に学びたい
- ネット記事だけだと情報が断片的に感じる
- 基本文法を順序立てて理解したい
onabort・onerror などの「読み込みエラーイベント」は、Webページの安定した表示を実現するうえで重要な基礎です。
書籍ではこれらを体系的に順序立てて学べるため、エラーハンドリングの理解が深まりやすくなります。
いちばんやさしい JavaScript の教本
写真や図が多く、手を動かしながら学べる初心者向けの入門書です。
画像読み込みやイベント処理の基本を、サンプルを通して丁寧に理解できます。
この本で解決できること：
onerrorの動作を視覚的に理解できる- イベントとエラーハンドリングの基礎が分かる
- 実際に動くサンプルで学べるため挫折しにくい
確かな力が身につく JavaScript「超」入門
JavaScriptの基礎を体系的に学びたい方に向いている入門書です。
読み込みエラー処理やイベントの仕組みを深く理解し、実務レベルの基礎力を身につけられます。
この本で解決できること：
onabort/onerrorの動作原理を体系的に理解できる- 代替画像表示や再読み込み処理など実務的な実装が学べる
- 現代的な JavaScript の書き方が身につく
動画で理解を深めたい方へ（Udemy講座）
onabort・onerror は「画像読み込みの失敗・中断」を扱うイベントで、
実際の画面の動きを動画で見ると理解が一気に深まります。
Udemy では初心者向けに丁寧に解説された講座が多数あります。
初心者のためのJavaScript 完全入門
関数・条件分岐・イベントなど、JavaScriptの基礎を体系的に学べる人気講座です。
この講座で解決できること：
onerrorの動作を視覚的に理解できる- 画像読み込みエラー時の処理フローが分かる
- 初心者がつまずきやすいポイントを丁寧に解説
→ 初心者のためのJavaScript 完全入門（Udemy）
超JavaScript 完全ガイド 2026
基礎から応用まで幅広く学べる講座で、onabort・onerror の理解をさらに深めたい方に最適です。
この講座で解決できること：
- 読み込みエラーイベントの応用的な使い方を理解できる
- 代替画像表示・再読み込み処理など実務的な実装が身につく
- 現代的な JavaScript の書き方をまとめて習得
体系的に学びたい方へ（スクールという選択肢）
独学の限界を感じやすいポイント
onabortとonerrorの使い分けで混乱しやすい- エラー処理の設計が難しい
- コードレビューを受ける機会がない
- 学習の順番に自信が持てない
スクールでは、プロの講師が学習ロードマップを作成し、
画像読み込みエラーのようなつまずきやすい部分を丁寧にサポートしてくれます。
無料相談で得られるメリット
- あなたのレベルに合わせた学習計画を作成
- 独学でつまずきやすい部分を事前に把握
- 学習方法の改善点をプロがアドバイス
- エンジニア転職を視野に入れたキャリア相談も可能
JavaScript を効率よく学びたい方には、未経験からエンジニアを目指せる
DMM WEBCAMP の学習コースも選択肢のひとつです。
onabort・onerror に関するよくある質問（FAQ）
onabort と onerror の違いは？
onabort は「読み込み中断」、onerror は「読み込み失敗」で発生します。
onerror は画像以外にも使える？
はい。スクリプト・CSS・iframe などの読み込み失敗時にも発生します。
onabort はユーザー操作でも発生する？
はい。ユーザーが読み込みをキャンセルした場合にも発生します。
代替画像を表示するにはどうすればいい？
onerror 内で this.src を書き換える方法が一般的です。
まとめ
onabort：画像読み込みが中断されたときに発生onerror：画像読み込みに失敗したときに発生- どちらもエラー処理や再読み込み処理に便利
- ユーザーに通知したり、代替画像を表示する用途にも使える
