JavaScriptのonabort・onerrorとは？画像読み込み中断・失敗時のイベント処理を解説
onabort と onerror は、画像が正常に読み込めなかった場合に発生するイベントです。
画像の読み込み中断やエラー発生時に処理を実行したい場合に利用します。
onabortイベントとは？
onabort は、画像の読み込みが途中で中断されたときに発生するイベントです。
ユーザーが読み込みをキャンセルしたり、ネットワークの問題で読み込みが止まった場合などに利用できます。
使用例：読み込み中断時に処理を実行
// 1番目の画像の読み込みが中断されたら retry() を実行
document.images[0].onabort = retry;
document.images[0].onabort = retry;
→ 必ず画像を表示させたい場合などに、再読み込み処理を行うことができます。
onerrorイベントとは？
onerror は、画像ファイルが存在しない・壊れているなどの理由で
画像の読み込みに失敗したとき に発生するイベントです。
使用例：読み込み失敗時にメッセージを表示
<img src=”sample.jpg” alt=”” onerror=”alert(‘表示できません。’)”>
→ 画像が見つからない場合にユーザーへ通知できます。
onabort と onerror の違い
| イベント | 発生タイミング |
|---|---|
| onabort | 読み込みが途中で中断されたとき |
| onerror | 読み込みに失敗したとき（ファイルなし・破損など） |
→ どちらも画像読み込みに関するエラー処理に役立ちます。
まとめ
onabort：画像読み込みが中断されたときに発生onerror：画像読み込みに失敗したときに発生- どちらもエラー処理や再読み込み処理に便利
- ユーザーに通知したり、代替画像を表示する用途にも使える
