読み込み中...

JavaScript onload徹底解説！初心者でも分かる10のサンプルコード

初心者が分かるJavaScript onload徹底解説とサンプルコード JS
2023.05.06
この記事は約17分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

本記事のサンプルコードを活用して機能追加、目的を達成できるように作ってありますので、是非ご活用ください。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を満たす現役のプログラマチームによって監修されています。

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

この記事を読めば、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>

●注意点と対処法

  1. セキュリティ：外部サイトからデータを取得する際には、セキュリティ対策を行ってください。
    特に、CORS（Cross-Origin Resource Sharing）によるアクセス制限がある場合、適切な対策が必要です。
  2. エラーハンドリング：通信エラーが発生した場合に適切なエラーハンドリングを行ってください。
    XMLHttpRequestオブジェクトのstatusプロパティをチェックし、エラーが発生した場合に適切な処理を行います。

●カスタマイズ方法

  1. 取得するデータの種類や形式に応じて、onreadystatechangeイベントで定義された関数内の処理を変更することで、データを表示する方法をカスタマイズできます。
    例えば、取得したデータを表形式で表示する場合や、データに基づいてグラフを描画する場合など、表示方法を変更することが可能です。
  2. データ取得のタイミングや頻度を変更することで、アプリケーションの動作を最適化できます。
    例えば、定期的にデータを取得して更新する場合、setInterval関数を使って一定間隔でデータ取得処理を実行することができます。

まとめ

この記事では、ページ読み込み完了後にさまざまな処理を実行するためのサンプルコードを紹介しました。

それぞれのサンプルコードは、window.onloadイベントを使って、ページ読み込みが完了した後に特定の処理を実行するように設定されています。

これらのサンプルコードを参考に、自分のプロジェクトに合わせたカスタマイズや拡張を行ってください。