window​.onloadについて

[結論]

  • window​.onloadとは?
  •  

    → 「何らかの処理を待つ」ことで、実行タイミングを調整するイベント

    → ページ全体が読み込まれると起動される

    →現在は古い手法と言われており、jQueryのload関数やaddEventListenerを使うことが多い

[目次]

[本題]

window​.onloadについて

JavaScriptを利用していると目にする機会があると思います。
今回はwindow​.onload について解説します。


実装例

window.onload = function(){
//ここに読み込み完了時に実行してほしい処理を書く
}

使用するシチュエーション

あらかじめscriptタグ内にJavaScriptで関数を作成。
それを「bodyタグ」の「onloadイベント」で実行する。
「onloadイベント」を覚えると、JavaScriptの「書く場所」を意識しなくてもDOMを扱えるようになる。

引用元(

https://www.sejuku.net/blog/19754#windowonload

<head>
<script>
    window.onload = function() {
        var memo = document.getElementById('memo');

        memo.textContent = 'こんにちは!';
    }
</script>
</head>
<body>
    <p id="memo"></p>
</body>

<head>
</head>

<!-- bodyにonloadイベントを設定 -->
<body onload="start()">
    <p id="memo"></p>


    <script>
        function start() {
            var memo = document.getElementById('memo');

            memo.textContent = 'こんにちは!';
        }
    </script>
</body>

参考にしたサイト

window.onloadに関する個人的なまとめ | JavaScript | Web関連 | KEPRATE

【JavaScript入門】onloadイベントの使い方とハマりやすい注意点とは | 侍エンジニア塾ブログ(Samurai Blog) - プログラミング入門者向けサイト

HTMLの読み込みが完了してから実行 - Qiita

window.onload - Web API | MDN

window, document, body のonload,onreadyイベントのそれぞれの違いの解説