JavaScriptのonloadイベントハンドラ
JavaScriptにおけるイベントハンドラ onload
このページでは、JavaScriptのイベントハンドラ onload に関する解説を行います。ページ内リンクを使って、各セクションにジャンプできます。
onloadとは何か
onload は、HTML要素が完全にロードされたときに実行されるJavaScriptのイベントハンドラです。主に以下の目的で使用されます。
- 画像やスクリプトの読み込み完了を検知する
- DOMの初期化やレイアウトの設定
- ページ読み込み後のデータ取得や処理
例:
<body onload="initializePage()">
ページの内容
</body>
基本的な使い方
HTML要素に直接 onload 属性を設定することで、指定したJavaScriptコードを実行できます。
例: 画像の読み込み完了を検知
<img src="example.jpg" onload="alert('画像が読み込まれました!')">
例: ページの初期化
<body onload="initializePage()">
<script>
function initializePage() {
alert('ページが読み込まれました');
}
</script>
</body>
応用的な使い方
onload を使うことで、非同期的な処理や、複数のリソースの読み込み完了を待つことが可能です。
画像読み込み完了後に次の処理を実行
<script>
const img = new Image();
img.onload = function() {
console.log('画像が読み込まれました');
document.body.appendChild(img);
};
img.src = 'example.jpg';
</script>
すべてのリソースの読み込み完了を検知
<script>
window.onload = function() {
console.log('ページが完全に読み込まれました');
};
</script>
実用例
動的コンテンツの表示
<body onload="displayWelcomeMessage()">
<div id="message"></div>
<script>
function displayWelcomeMessage() {
document.getElementById('message').innerText = 'ようこそ！';
}
</script>
</body>
スクリプトの遅延読み込み
<script>
window.onload = function() {
const script = document.createElement('script');
script.src = 'additional-script.js';
document.body.appendChild(script);
};
</script>
よくあるエラーとその対処法
以下は、onload を使用する際によくあるエラーとその解決方法です。
スクリプトのロード順序の問題
スクリプトが早すぎるタイミングで実行されると、対象の要素が存在しない場合があります。解決策としては、DOMContentLoaded や defer を使用します。
<script defer src="script.js"></script>
イベントの上書き
複数の onload ハンドラを設定すると、後から設定したものが前のものを上書きしてしまうことがあります。代わりに addEventListener を使用することで回避できます。
window.addEventListener('load', function() {
console.log('これは上書きされません');
});
以上が、JavaScriptにおける onload イベントハンドラの解説です。