はじめに
この記事を読めば、JavaScriptのonloadイベントを使ってページの読み込み完了後に様々な処理を実行できるようになります。
初心者向けにonloadイベントの基本から応用例まで徹底解説し、10のサンプルコードを通して使い方や注意点、カスタマイズ方法を学んでいきましょう。
●JavaScript onloadイベントとは
○onloadイベントの基本
onloadイベントは、ページや画像、スクリプトなどのリソースが完全に読み込まれた後に発火するイベントです。
ページ読み込み時に特定の処理を実行したい場合や、リソースの読み込み完了を確認してから処理を行いたい場合に利用されます。
●onloadイベントの使い方
○サンプルコード1：画像の読み込み完了後に実行する
このコードでは、画像が読み込まれた後にアラートを表示する例を紹介しています。
この例では、画像のonload属性に関数を設定して、読み込み完了後にアラートを表示しています。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>画像読み込み完了後にアラート表示</title>
</head>
<body>
<img src="sample.jpg" alt="サンプル画像" onload="showAlert();">
<script>
function showAlert() {
alert('画像が読み込まれました！');
}
</script>
</body>
</html>○サンプルコード2：ウィンドウが読み込まれた後に実行する
このコードでは、ウィンドウが読み込まれた後にアラートを表示する例を紹介しています。
この例では、windowオブジェクトのonloadイベントに関数を設定して、読み込み完了後にアラートを表示しています。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ウィンドウ読み込み完了後にアラート表示</title>
</head>
<body>
<script>
window.onload = function() {
alert('ウィンドウが読み込まれました！');
};
</script>
</body>
</html>○サンプルコード3：外部ファイルの読み込み後に実行する
このコードでは、外部スクリプトファイルが読み込まれた後にアラートを表示する例を紹介しています。
この例では、scriptタグのonload属性に関数を設定して、読み込み完了後にアラートを表示しています。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>外部ファイル読み込み後にアラート表示</title>
</head>
<body>
<script src="external.js" onload="showAlert();"></script>
<script>
function showAlert() {
alert('外部ファイルが読み込まれました！');
}
</script>
</body>
</html>●onloadイベントの応用例
○サンプルコード4：画像スライドショーを作成する
このコードでは、ページ読み込み後に画像スライドショーを開始するコードを紹介しています。
この例では、ウィンドウのonloadイベントに関数を設定し、画像の配列を用意して順番に表示しています。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>画像スライドショー</title>
<style>
#slideshow {
width: 400px;
height: 300px;
overflow: hidden;
position: relative;
}
#slideshow img {
position: absolute;
animation: fade 5s infinite;
opacity: 0;
}
@keyframes fade {
0%, 100% { opacity: 0 }
50% { opacity: 1 }
}
</style>
</head>
<body>
<div id="slideshow">
<img src="img1.jpg" alt="">
<img src="img2.jpg" alt="">
<img src="img3.jpg" alt="">
</div>
<script>
window.onload = function() {
const images = document.querySelectorAll('#slideshow img');
let index = 0;
function showImage() {
images[index].style.opacity = 1;
setTimeout(function() {
images[index].style.opacity = 0;
index = (index + 1) % images.length;
showImage();
}, 5000);
}
showImage();
};
</script>
</body>
</html>○サンプルコード5：ページ読み込み時にアニメーションを表示する
このコードでは、ページ読み込み後にCSSアニメーションを表示する例を紹介しています。
この例では、ウィンドウのonloadイベントに関数を設定し、アニメーションクラスを追加しています。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ページ読み込み時にアニメーション表示</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
opacity: 0;
}
.animate {
animation: fadeIn 2s forwards;
}
@keyframes fadeIn {
0% { opacity: 0 }
100% { opacity: 1 }
}
</style>
</head>
<body>
<div class="box"></div>
<script>
window.onload = function() {
const box = document.querySelector('.box');
box.classList.add('animate');
};
</script>
</body>
</html>○サンプルコード6：読み込み完了後にモーダルウィンドウを表示する
このコードでは、ページ読み込み後にモーダルウィンドウを表示する例を紹介しています。
この例では、ウィンドウのonloadイベントに関数を設定し、モーダルウィンドウを表示しています。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>読み込み完了後にモーダルウィンドウ表示</title>
<style>
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 9999;
}
.modal-content {
width: 300px;
height: 200px;
background-color: white;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="modal">
<div class="modal-content">
<h2>モーダルウィンドウ</h2>
<p>ページ読み込み後に表示されます。</p>
</div>
</div>
<script>
window.onload = function() {
const modal = document.querySelector('.modal');
modal.style.display = 'block';
};
</script>
</body>
</html>○サンプルコード7：読み込み完了後にテキストを動的に変更する
このコードでは、ページ読み込み後にテキストを動的に変更する例を紹介しています。
この例では、ウィンドウのonloadイベントに関数を設定し、指定した要素のテキストを変更しています。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>読み込み完了後にテキストを動的に変更</title>
</head>
<body>
<h1 id="title">ここにタイトルが表示されます</h1>
<script>
window.onload = function() {
const title = document.getElementById('title');
title.textContent = '読み込み完了後に表示されるタイトル';
};
</script>
</body>
</html>○サンプルコード8：読み込み完了後にフォームの入力内容をチェックする
このコードでは、ページ読み込み後にフォームの入力内容をチェックする例を紹介しています。
この例では、ウィンドウのonloadイベントに関数を設定し、フォームの入力内容が正しいかどうかを確認しています。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>読み込み完了後にフォームの入力内容をチェック</title>
<style>
.error { color: red; }
</style>
</head>
<body>
<form id="form">
<label for="username">ユーザー名：</label>
<input type="text" id="username" name="username">
<span id="usernameError" class="error"></span>
<br>
<button type="submit">送信</button>
</form>
<script>
window.onload = function() {
const form = document.getElementById('form');
const username = document.getElementById('username');
const usernameError = document.getElementById('usernameError');
form.addEventListener('submit', function(event) {
event.preventDefault();
if (username.value.length < 5) {
usernameError.textContent = 'ユーザー名は5文字以上で入力してください。';
} else {
usernameError.textContent = '';
alert('送信完了');
}
});
};
</script>
</body>
</html>○サンプルコード9：読み込み完了後にカウントダウンタイマーを開始する
このコードでは、ページ読み込み完了後にカウントダウンタイマーを開始する機能を実装しています。
この例では、ウィンドウのonloadイベントに関数を設定し、指定された時間が経過したらメッセージを表示しています。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>読み込み完了後にカウントダウンタイマーを開始する</title>
</head>
<body>
<h1 id="timer">10</h1>
<script>
window.onload = function() {
let timeLeft = 10;
const timerElement = document.getElementById('timer');
const timerInterval = setInterval(function() {
timeLeft -= 1;
timerElement.textContent = timeLeft;
if (timeLeft <= 0) {
clearInterval(timerInterval);
timerElement.textContent = 'カウントダウン終了！';
}
}, 1000);
};
</script>
</body>
</html>○サンプルコード10：読み込み完了後にAjaxを使用してデータを取得する
このコードでは、ページ読み込み完了後にAjaxを使用して外部サービスからデータを取得する機能を実装しています。
この例では、ウィンドウのonloadイベントに関数を設定し、外部APIからデータを取得して表示しています。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>読み込み完了後にAjaxを使用してデータを取得する</title>
</head>
<body>
<div id="data"></div>
<script>
// ページ読み込み完了後に実行される関数
window.onload = function() {
const dataElement = document.getElementById('data');
const xhr = new XMLHttpRequest();
// 通信状況が変化した際に実行される関数
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
const response = JSON.parse(xhr.responseText);
dataElement.textContent = '取得したデータ：' + response.data;
}
};
// APIリクエストを設定
xhr.open('GET', 'https://api.example.com/data', true);
xhr.send();
};
</script>
</body>
</html>●注意点と対処法
- セキュリティ：外部サイトからデータを取得する際には、セキュリティ対策を行ってください。
特に、CORS（Cross-Origin Resource Sharing）によるアクセス制限がある場合、適切な対策が必要です。 - エラーハンドリング：通信エラーが発生した場合に適切なエラーハンドリングを行ってください。
XMLHttpRequestオブジェクトのstatusプロパティをチェックし、エラーが発生した場合に適切な処理を行います。
●カスタマイズ方法
- 取得するデータの種類や形式に応じて、
onreadystatechangeイベントで定義された関数内の処理を変更することで、データを表示する方法をカスタマイズできます。
例えば、取得したデータを表形式で表示する場合や、データに基づいてグラフを描画する場合など、表示方法を変更することが可能です。 - データ取得のタイミングや頻度を変更することで、アプリケーションの動作を最適化できます。
例えば、定期的にデータを取得して更新する場合、setInterval関数を使って一定間隔でデータ取得処理を実行することができます。
まとめ
この記事では、ページ読み込み完了後にさまざまな処理を実行するためのサンプルコードを紹介しました。
それぞれのサンプルコードは、window.onloadイベントを使って、ページ読み込みが完了した後に特定の処理を実行するように設定されています。
これらのサンプルコードを参考に、自分のプロジェクトに合わせたカスタマイズや拡張を行ってください。
