JavaScriptをHTMLが読み込まれたら実行する

JavaScriptをHTMLが読み込まれたら実行する、または、ウェブページが完全に読み込まれたら実行するということを行う方法についてメモです。

DOMContentLoadedがHTML、onloadがウェブページ全体です。

JavaScriptでは、addEventListenerでイベントを指定してやります。

以下コードで検証してみればわかりますが、当然、DOMContentLoadedが先に出力されます。 というか、ウェブサイトによっては、いくら待ってもDOMContentLoadedが出力されない場合もあります。 僕のWordPressブログなんかもそうですし、Youtubeなんかもそうでした。

//# dev
document.addEventListener("load", function() {
   // 実行したい処理
   console.log('loaded.')
});

document.addEventListener("DOMContentLoaded", function() {
   // 実行したい処理
   console.log('DOMContentLoaded.')
});

なので新しいサイトで開発を始める前には、onloadは動かないものとして、もし使うなら、必ず上記コードで検証してからのほうが良いかと思います。