window.onloadの利用はお勧めしない その理由

window.onloadを書いたけど、動かないことが多々あります。 これは、同じページ内で複数のwindow.onloadが記述されている場合に、一つしか動作できないのが原因なようです。 また、「一つしか動作できない」というのは、正確には、関数を上書きしてしまっている（オーバーライド）しているようです。 複数の開発者で開発していた場合には、自分の書いた部分を上書きされてしまい、障害として発生してしまう恐れもあるため、使用はお勧めできません。 例えば、外部ライブラリの中にwindow.onloadの記述があった場合には、その機能が正常に動作しないなどのことも考えられます。

何を使うべきか

もし、window.onloadを使用するのであれば、 window.addEventListener(‘DOMContentLoaded’, function() { もしくは、 window.addEventListener(“load”,function() { の使用をお勧めします。 この二つの違いは、 DomContentLoadedの場合は、DOMツリー構築完了時に、呼び出され、 loadの場合は、DOMツリー構築完了後、画像などの読込が終わったら呼び出されるというところです。 そのため、DomContentLoadedの方が速く呼び出されるので、特に画像の読込などを待つ必要がなければ、こちらを利用する方が良いです。 また、addEventListenerのloadとwindow.onloadは同じタイミングで実行されているようで、そういった点からもwindow.onloadの使用は損をしているのかもしれません。

サンプルコード

document.addEventListener('DOMContentLoaded', function() {
    console.log('sample');
});