Blog

JavaScriptをHTMLが読み込まれたら実行する／ウェブページが完全に読み込まれたら実行する

    >

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

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

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

puts "nothing" ; 

puts "ruby" ; 

puts "lang-ruby" ; 

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

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

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

お困りですか？この記事で紹介していることをマンツーマンで指導、解説、代行します。まずはお気軽にお問い合わせください。

Close Menu