【JavaScript】loadイベントでHTMLファイルの読み込み後に処理を行う!

エンジニアに特化した転職エージェント!

・IT/Web系エンジニアの経験者の方
・どこの転職エージェントを利用しようか迷っている方

それなら、キッカケエージェントにご相談!

キッカケエージェントでは、少数精鋭のエージェントが、エンジニアの経験やスキル、志向性などをカウンセリングし、的確なアドバイスを提供します!

また、徹底した企業へのヒアリングにより、最適なマッチングを実現し、今では内定率が一般的なエージェントの2倍以上となっています!

転職エージェントに迷っている方、まずは無料でキャリア相談から!




(この記事は2023年03月25日に投稿されました。)

JavaScriptでHTMLファイルの読み込み後に処理を行う方法として、loadイベントがあります。

loadイベントとは、関数をHTMLファイルの読み込み完了後に発生することができるイベントになります。

プログラムは読み込んだ瞬間に処理が行われるため、HTML要素を読み込んでない状態で実行することがあり、エラーが発生してしまうことがあります。

しかし、loadイベントで設定することでHTMLファイルの読み込みが完了して処理を実行するため、エラーが発生することなく処理を実行することができるようになります。

そのため、CSSでアニメーションを設定している場合や処理が複雑になる場合は保険としてloadイベントで処理を実行するようにしましょう。

今回はJavaScriptのloadイベントでHTMLファイルの読み込み後に処理を行う方法について紹介していきます。

この記事はこんな方におすすめ
・HTMLファイルの読み込みが完了した後に処理を行うよう設定したい場合

loadイベントとは

loadイベントとは関数をHTMLファイルの読み込み完了後に発生することができるイベントになります。

プログラムは読み込んだ瞬間に処理が行われるため、HTML要素を読み込んでない状態で実行することがあります。

しかし、loadイベントを使用することでHTMLファイル完全に読み込んでからイベントを実施することができるようになります。

loadイベントの書き方

loadイベントの書き方は下記の2パターンになります。

windowの後ろにonloadと追記し、実行したい「関数名」を「=(イコール)」で繋げることでloadイベントの関処理を実行することができるようになります。

しかし、複数の処理を記述すると上書きされてしまうため、こちらの書き方を使用する際には注意が必要です。

windowの後ろにaddEventListener()と追記し、パラメータに「load」と「関数」を指定することでもloadイベントの関処理を実行することができるようになります。

こちらの書き方は複数の処理を記述してもそれぞれの処理を実行するため、上書きされることはありません。

loadイベントの発生タイミング

loadイベントの発生タイミングは、HTMLファイルの読み込みの完了後となります。

loadイベントでHTMLファイルの読み込み後に処理を行うサンプルコード

loadイベントでファイルの読み込み後に処理を行うサンプルコードをご紹介します。

ここでは、下記の2つのパターンでloadイベントを使用します。

  1. loadイベントのみの関数が存在する場合
  2. loadイベント以外の関数が存在する場合

loadイベントのみの関数が存在する場合

loadイベントのみの関数が存在する場合は、HTMLファイルを読み込んだ後に設定した関数の処理が実行されるようになります。

● index.html

● main.js

実行結果

loadイベントでHTMLファイルの読み込み後に処理を行った結果

loadイベントでファイルを読み込んだ後に設定した関数の処理を実行しています。

そのため、HTMLのファイルが読み込まれた後に「〇〇のloadイベントにより作成されました。」という2つのHTML要素が表示されています。

loadイベント以外の関数が存在する場合

loadイベント以外の関数が存在する場合は、loadイベント以外で設定した関数が先に実行され、そのあとにloadイベントで設定した関数が実行されるようになります。

● index.html

● main.js

実行結果

他の関数が存在する場合にloadイベントでHTMLファイルの読み込み後に処理を行った結果

loadイベントでファイルを読み込んだ後に設定した関数の処理を実行しています。

今回は他の関数の処理も行われているため、「HTML要素が作成されました。」というHTML要素の後に「〇〇のloadイベントにより作成されました。」という2つのHTML要素が表示されています。

Sossy

loadイベントはHTMLファイル読み込み完了後が条件になります。
そのため、loadイベントで実行する処理よりも条件がない処理の方が先に実行されるようになります。

loadイベントを特定のHTML要素に設定する場合

loadイベントを特定のHTML要素に設定するには、onloadを属性として使用します。

HTML要素のタグ内に属性として追加することで、特定のHTML要素にloadイベントの設定を行うことができるようになります。

しかし、onload属性を使用できる対象のタグは「body」と「iframe」のみになりますので注意してください。

● index.html

● main.js

実行結果

特定のHTMLにloadイベントを設定して処理を行った結果

onload属性で特定のHTML要素にloadイベントを設定して処理を行っています。

そのため、「bodyのloadイベントにより作成されました。」というHTML要素が画面に表示されています。

loadイベントを使用した実際のケース

loadイベントを使用した実際のケースについてご紹介します。

例えば、loadイベントを利用してCSSのアニメーションをHTMLファイルを読み込んだ後に実行するような画面を作成します。

● index.html

● style.css

● main.js

実行結果

loadイベントでHTMLファイルを読み込んだ後にCSSのアニメーションを実行した結果

loadイベントを使用することで、ページをロードしてからCSSのアニメーションが実行されています。

そのため、「内容A〜H」のHTML要素が跳ねて画面に表示されています。

逆にloadイベントを使用しないで処理を実行すると、下記のような結果となります。

実行結果(loadイベントなし)

loadイベントを使用せずにHTMLファイルを読み込んだ後にCSSのアニメーションを実行した結果

HTML要素を読み込んでいない状態で取得しようとしているため、querySelectorAll()でnullを返してしまいます。

そのため、ページをロードしてもCSSの跳ねるアニメーションは実行されず、そのまま画面に表示されます。

jQueryでHTMLファイルの読み込み後に処理を行う場合

jQueryでHTMLファイルの読み込み後に処理を行うには、on()を使用します。

on()とは、要素にイベントが発生した時に処理を実行するよう紐づけるメソッドになります。

さまざまなイベントと紐づけることができるため、on()はaddEventListener()のjQuery版となります。

● index.html

● main.js

実行結果

jQueryのon()でHTMLファイルの読み込み後に処理を行った結果

jQueryのon()でファイルの読み込んだ後に設定した関数の処理を実行しています。

そのため、ファイルを読み込んだ後に「on()により作成されました。」というHTML要素が表示されています。

DOM要素の読み込み後に処理を行う場合

DOM要素の読み込み後に処理を行うには、DOMContentLoadedを使用します。

DOMContentLoadedは、DOM要素の読み込みが完了したタイミングで発生することができるイベントになります。

つまり、HTMLファイルをすべて読み込まなくても、DOM要素の読み込みが完了していればイベントが発生されるようになります。

● index.html

● main.js

実行結果

DOMContentLoadedイベントでDOM要素の読み込み後に処理をった結果

DOMContentLoadedイベントでDOM要素を読み込んだ後に設定した関数の処理を実行しています。

そのため、HTMLのファイルが読み込まれた後に「DOMContentLoadedイベントにより作成されました。」というHTML要素が表示されています。

また、loadイベントよりも後にDOMContentLoadedイベントを記述していますが、DOMContentLoadedイベントの方が先に実行されています。

Sossy

loadはファイル読み込み完了時に、DOMContentLoadedはDOM要素が読み込まれた時に発生するため、発生するタイミングはloadイベントよりも速くなります。

他のページへ遷移する直前に処理を行う場合

他のページへ遷移する直前に処理を行うにはbeforeunloadを使用します。

beforeunloadとは、HTMLの現在のページから他のページへ遷移する直前に発生するイベントになります。

つまり、ページのファイルを読み込む前に発生させることができるイベントになります。

● index.html

● main.js

● before.html

実行結果

beforeunloadイベントで他のページへ遷移する直前に処理を行っています。

そのため、「前のページへ」というボタンを押した後にアラートが表示されています。

まとめ

⚫︎ loadイベントとはHTMLファイルの読み込み完了後に発生することができるイベントである

⚫︎ loadイベントの書き方としては下記の2つがある
・onloadを使用する
(複数の処理を記述すると上書きされる)
・addEventListener()を使用する
(複数の処理を記述しても上書きされない)

⚫︎ loadイベントを特定のHTML要素に設定するには、onloadを属性として使用する
(使用できるタグは「body」と「iframe」)

⚫︎ jQueryでHTMLファイルの読み込み後に処理を行うには、on()を使用する

⚫︎ DOM要素の読み込み後に処理を行うには、DOMContentLoadedイベントを使用する
(loadイベントよりも発生するタイミングが早い)

⚫︎ 他のページへ遷移する直前に処理を行うにはbeforeunloadイベントを使用する