中嶋悟
名前：中嶋 悟（なかじま さとる） ニックネーム：サトルン 年齢：28歳 性別：男性 職業：会社員（IT系メーカー・マーケティング部門） 通勤場所：東京都千代田区・本社オフィス 通勤時間：片道約45分（電車＋徒歩） 居住地：東京都杉並区・阿佐ヶ谷の1LDKマンション 出身地：神奈川県横浜市 身長：175cm 血液型：A型 誕生日：1997年5月12日 趣味：比較記事を書くこと、カメラ散歩、ガジェット収集、カフェ巡り、映画鑑賞（特に洋画）、料理（最近はスパイスカレー作りにハマり中） 性格：分析好き・好奇心旺盛・マイペース・几帳面だけど時々おおざっぱ・物事をとことん調べたくなるタイプ 1日（平日）のタイムスケジュール 6:30 起床。まずはコーヒーを淹れながらニュースとSNSチェック 7:00 朝食（自作のオートミールorトースト）、ブログの下書きや記事ネタ整理 8:00 出勤準備 8:30 電車で通勤（この間にポッドキャストやオーディオブックでインプット） 9:15 出社。午前は資料作成やメール返信 12:00 ランチはオフィス近くの定食屋かカフェ 13:00 午後は会議やマーケティング企画立案、データ分析 18:00 退社 19:00 帰宅途中にスーパー寄って買い物 19:30 夕食＆YouTubeやNetflixでリラックスタイム 21:00 ブログ執筆や写真編集、次の記事の構成作成 23:00 読書（比較記事のネタ探しも兼ねる） 23:45 就寝準備 24:00 就寝
domcontentloadedとloadの違いを徹底解説: ウェブの読み込みイベントを正しく理解する
ウェブページを作るとき、JavaScriptはどのタイミングで動き始めるかを知ることが大切です。特に domcontentloaded と load という2つのイベントは「ページが見えるようになる瞬間」を表しますが、実際には発生するタイミングが違います。
この違いを知っておくと、ユーザーがページを開いたときの体感や、ボタンを押したときの反応をきちんとコントロールできます。
この記事では中学生にも分かる言葉で、どちらがいつ発生するのか、どう使い分けるべきかを丁寧に解説します。
また、実務での小さなコツも紹介しますので、初心者の人も安心して読み進めてください。
まずは結論から言うと、DOMContentLoaded は「DOM が完成して、スクリプトが安全に DOM を操作できる状態」を意味します。対して load は「すべてのリソース、画像や外部ファイルなども含めてページ全体が完全に読み込まれた状態」を意味します。これだけを覚えておくと、どのイベントを待つべきかが見えてきます。
この章では、タイムラインの感覚を身につけるための説明を続けます。
1章: DOMContentLoadedが発生するタイミングと意味
DOMContentLoaded は、HTML の解析がほぼ終わり、DOM が構築され、スクリプトが DOM にアクセスして安全に変更を加えられる状態になったときに発生します。通常は document.readyState が"interactive" か "complete" に近い時点で発生します。
このイベントが鳴ると、JavaScript は「今から DOM をいじっていいよ」というサインを受け取ることになります。
たとえば、メニューの表示を切り替えたり、ボタンをクリックしたときの挙動を設定したりするときには、この DOMContentLoaded を待つのが一般的です。
しかし、画像やフォントなどの外部リソースがまだ読み込み中の場合でも発生するため、完璧にページが見えた状態とは別のタイミングです。
この性質を理解すると、ページの初期表示を早くする工夫を考えやすくなります。
重要ポイント は「DOM の準備が整えばすぐに動作を開始できる」ことと「画像などのリソースの読み込みは別のタイミングで進む」という点です。
2章: Loadが発生するタイミングと意味
Load イベントは、ページ内のすべての要素、つまり HTML の読み込みだけでなく、画像・動画・外部スタイルシート・フォントなど、すべてのリソースが完全に読み込まれた後に発生します。つまり、画面上に表示されている何かが「きちんと表示され、動作する」状態が揃った時点です。
このイベントを待ってから、スライダーやギャラリーの初期化、サイズの確定を行うと、表示が安定します。
ただし、リソースが多いページでは Load まで待つと表示までの待ち時間が長くなり、ユーザー体験が低下することがあります。
パフォーマンスを重視する場合は、必要なときだけ Load を待つ設計にすることが多いです。
3章: 実務での使い分けとパフォーマンスへの影響
実務では、どのイベントを待つかをページの目的に合わせて決めます。たとえば、初期表示の速度を速くしたいときは DOMContentLoaded を待つだけで十分な場面が多いです。
逆に、画像が完全に読み込まれるまでの表示の崩れを避けたい場合は Load を待つか、あるいはリソースの読み込み順をコントロールします。
また、次のような折衷案もあります。
・DOM の準備が整った時点で最小限の処理を走らせ、負荷を分散する。
・画像の遅延読み込み（Lazy Load）を導入して、初期表示時の Load 待ち時間を縮める。
・イベントのデフォルト動作を抑制して、適切なタイミングで DOM とリソースの準備が整ったときに処理を開始する。
今日は友人とこの話をしていて、DOMContentLoaded が発生する前に先にボタンの見た目を整えようとして失敗した経験を話しました。結局、最初の表示を速くするには DOM が完成した瞬間に動かす処理だけを走らせ、画像の読み込みは別のタイミングで確保するのがコツだよね、という結論に落ち着きました。実務の現場でも、どのイベントを待つかを決めるだけで、コードの設計とパフォーマンスは大きく変わります。
ITの人気記事
