JavaScript の onload イベントの処理方法

概要: このチュートリアルでは、JavaScript でドキュメント、画像、スクリプト要素で発生する load イベントの処理方法を学びます。

window の load イベント

window オブジェクトの場合、load イベントは、JavaScript ファイル、CSS ファイル、画像など、すべてのリソースを含め、Web ページ（HTML）全体が完全にロードされたときに発生します。

load イベントを処理するには、addEventListener() メソッドを使用してイベントリスナーを登録します。

window.addEventListener('load', (event) => {
    console.log('The page has fully loaded');
});Code language: JavaScript (javascript)

または、window オブジェクトの onload プロパティを使用することもできます。

window.onload = (event) => {
    console.log('The page has fully loaded');
};Code language: JavaScript (javascript)

レガシーシステムを保守している場合、HTML ドキュメントの body 要素に load イベントハンドラーが登録されている場合があります。たとえば、次のようにです。

<!DOCTYPE html>
<html>
<head>
    <title>JS load Event Demo</title>
</head>
<body onload="console.log('Loaded!')">
</body>
</html>Code language: HTML, XML (xml)

可能な限り addEventListener() メソッドを使用して onload イベントハンドラーを割り当てるのが良い習慣です。

画像の load イベント

load イベントは画像でも発生します。画像の load イベントを処理するには、画像要素の addEventListener() メソッドを使用します。

次の例では、DOM ツリーに存在する画像が完全にロードされたかどうかを判断するために load イベントハンドラーを使用しています。

<!DOCTYPE html>
<html>
<head>
    <title>Image load Event Demo</title>
</head>
<body>
    <img id="logo">
    <script>
        let logo = document.querySelector('#logo');

        logo.addEventListener('load', (event) => {
            console.log('Logo has been loaded!');
        });

        logo.src = "logo.png";
    </script>
</body>
</html>
Code language: HTML, XML (xml)

<img> 要素の onload 属性を使用して、onload イベントハンドラーを直接割り当てることもできます。たとえば、次のようにです。

<img id="logo" 
     src="logo.png" 
     onload="console.log('Logo loaded!')">
Code language: HTML, XML (xml)

動的に画像要素を作成する場合、次のように src プロパティを設定する前に onload イベントハンドラーを割り当てることができます。

window.addEventListener('load' () => {
    let logo = document.createElement('img');
    // assign and onload event handler
    logo.addEventListener('load', (event) => {
        console.log('The logo has been loaded');
    });
    // add logo to the document
    document.body.appendChild(logo);
    logo.src = 'logo.png';
});
Code language: JavaScript (javascript)

仕組み

まず、window の load イベントのイベントハンドラー内にコードを配置することで、ドキュメントが完全にロードされた後に画像要素を作成します。
次に、画像の onload イベントハンドラーを割り当てます。
3 番目に、画像をドキュメントに追加します。
最後に、画像 URL を src 属性に割り当てます。src プロパティが設定されるとすぐに画像が要素にダウンロードされます。

スクリプトの load イベント

<script> 要素も、標準的な方法とはわずかに異なる load イベントをサポートしています。スクリプトの load イベントを使用すると、JavaScript ファイルが完全にロードされたかどうかを確認できます。

画像とは異なり、Web ブラウザは src プロパティが割り当てられ、<script> 要素がドキュメントに追加された後にのみ JavaScript ファイルのダウンロードを開始します。

次のコードは、ページが完全にロードされた後に app.js ファイルをロードします。app.js が完全にロードされたかどうかを確認するために、onload イベントハンドラーを割り当てています。

window.addEventListener('load', checkJSLoaded)

function checkJSLoaded() {
    // create the script element
    let script = document.createElement('script');
    
    // assign an onload event handler
    script.addEventListener('load', (event) => {
        console.log('app.js file has been loaded');
    });

    // load the script file
    script.src = 'app.js';
    document.body.appendChild(script);
}Code language: JavaScript (javascript)

まとめ

load イベントは、JavaScript ファイル、CSS ファイル、画像などの依存リソースを含め、ドキュメントが完全にロードされたときに発生します。
<img> および <script> 要素も load イベントをサポートしています。
onload イベントハンドラーを登録するには、addEventListener() メソッドを使用します。

このチュートリアルは役に立ちましたか？