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

window.onloadを書いたけど、動かないことが多々あります。

これは、同じページ内で複数のwindow.onloadが記述されている場合に、一つしか動作できないのが原因なようです。

また、「一つしか動作できない」というのは、正確には、関数を上書きしてしまっている(オーバーライド)しているようです。

 

複数の開発者で開発していた場合には、自分の書いた部分を上書きされてしまい、障害として発生してしまう恐れもあるため、使用はお勧めできません。

 

例えば、外部ライブラリの中にwindow.onloadの記述があった場合には、その機能が正常に動作しないなどのことも考えられます。

 

何を使うべきか

もし、window.onloadを使用するのであれば、

window.addEventListener('DOMContentLoaded', function() {

もしくは、

window.addEventListener("load",function() {

の使用をお勧めします。

この二つの違いは、

DomContentLoadedの場合は、DOMツリー構築完了時に、呼び出され、

loadの場合は、DOMツリー構築完了後、画像などの読込が終わったら呼び出されるというところです。

 

そのため、DomContentLoadedの方が速く呼び出されるので、特に画像の読込などを待つ必要がなければ、こちらを利用する方が良いです。

また、addEventListenerのloadwindow.onloadは同じタイミングで実行されているようで、そういった点からもwindow.onloadの使用は損をしているのかもしれません。

 

サンプルコード

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