jQueryのページの読込イベント、readyとloadを素のJSで書く

皆さまこんにちは、ウチイダユウゴです！

jQueryの構文ウチイダ的にはすごく書きやすいのですが、とうぜんjQueryを読み込んでからでないと実行できません。

でも、なるべく素早く処理を行いたいときってありますよね。

そういう場合に素のJavaScriptをサッと書けたらいいなあと思い、読み込み処理のイベントについて調べました。

jQueryではreadyとloadで書いていたものを、素のJavaScriptで記述するとこうなります。

$(‘document’).ready() の書き換え

document.addEventListener('DOMContentLoaded', function(){
  /* DOM読み込み完了時に以下の処理を実行 */
  console.log('DOM loaded');
});

DOMの読み込み(HTMLのデータのパース)が完了した際、documentオブジェクトにDOMContentLoadedイベントが発生します。

そのイベントに対して処理を追加してあげれば、読み込み完了時の動作を登録することができます。

window.addEventListener('load', function(){
  /* ページ内のすべてのデータの読み込みが完了したときに実行 */
  console.log('all data loaded');
});

画像やフォントデータ、CSSファイルなど、ページ内のすべての要素の読み込みが完了したら
windowオブジェクトにloadイベントが発生します。

全部のデータがそろってから行いたい処理の場合は、loadイベントを使うことができますね。

DomContentLoadedイベントはdocumentオブジェクトに、
loadイベントはwindowオブジェクトにそれぞれ発生します。

オブジェクトの指定を間違えてaddEventListenerしても処理ができないので注意です！

それでは、最後まで読んでいただきありがとうございました(/・ω・)/