window.onload・とは？初心者でもわかる基本と使い方ガイド共起語・同意語・対義語も併せて解説！

この記事を書いた人

高岡智則

年齢：33歳性別：男性職業：Webディレクター（兼ライティング・SNS運用担当）居住地：東京都杉並区・永福町の1LDKマンション出身地：神奈川県川崎市身長：176cm 体系：細身〜普通（最近ちょっとお腹が気になる）血液型：A型誕生日：1992年11月20日最終学歴：明治大学・情報コミュニケーション学部卒通勤：京王井の頭線で渋谷まで（通勤20分）家族構成：一人暮らし、実家には両親と2歳下の妹恋愛事情：独身。彼女は2年いない（本人は「忙しいだけ」と言い張る）

window.onloadとは何か

window.onload はウェブページが「すべてのリソースの読み込みが完了した時点」で発火する特別なイベントです。ここでいうリソースにはHTMLだけでなく、画像やスタイルシート、外部のスクリプトなども含まれます。つまりページの表示が完全に整った直後に実行したい初期処理を置く場所として使われます。初心者にとってのポイントはページが完全に読まれるまで待つべきかどうかを判断することです。

このイベントは window の一部として提供され、load イベントと呼ばれることもあります。最も基本的な書き方は次の通りです。window.onload = function() { ... } と書くと、ページの読み込み完了時にこの関数が実行されます。ただし1つのページに複数の処理を追加したい場合は注意が必要です。上書きされてしまうと前の処理が動かなくなることがあるからです。

そこで現代的な書き方としておすすめなのが addEventListener の使い方です。次のように書くと、複数のイベントハンドラを問題なく追加できます。window.addEventListener('load', function(){ ... }); これなら他のスクリプトと干渉せず、すっきりとした実装になります。

DOM の読み込み順と違いを理解することも大切です。DOMContentLoadedは HTML の解析が完了した時点で発火しますが、window.onloadは画像などのリソースの読み込みが完了した後に発火します。つまり DOM を操作するだけなら DOMContentLoaded の方が早く実行され、ページのデザインだけでなく外部画像を待つ必要がある場合は window.onload を使う場面があります。

実際の使い方は以下のとおりです。基本例として、ページが読み込まれた後に初期設定を行いたい場合には、次のようにコードを書きます。 window.onload = function() { // 初期化処理 } ここには、例えば画像のサイズを調整する処理や、初回のアニメーション開始、イベントリスナーの登録などを記述します。

別の実装として addEventListener の使い方も覚えておきましょう。 window.addEventListener('load', function() { /* 初期化処理 */ }); という形です。この書き方の利点は、複数のイベントハンドラを安全に追加できる点です。特に大きなウェブアプリや複数の外部ライブラリを使う場合にはこの方法が安全です。

表で学ぶ window.onload と DOMContentLoaded の違い

項目	window.onload	DOMContentLoaded
発火タイミング	全てのリソース読み込み完了後	HTML の解析完了後
用途の目安	画像や外部リソースを待つ必要がある場合	DOM 操作の準備が整った時点で実行
複数処理の扱い	addEventListener 推奨、上書き注意	複数のイベントリスナーを安全に追加可能

ここまでを踏まえると、初心者には「DOM を触る前提の作業は DOMContentLoaded、外部リソースの依存がある場合は window.onload を使い分ける」のが基本的な考え方です。注意点としては、ブラウザのキャッシュや古いブラウザの挙動差によってタイミングがわずかに異なることを知っておくことです。特に古いIE系の仕様では onload の挙動が現代の実装と完全には一致しない場合があります。

実務的なコツとしては、コードの再利用性を高めるために、window.onload に大きな処理を書かず、初期化用の関数を用意しておくとよいでしょう。例えば、初期化関数を別に用意して window.onload からその関数を呼ぶ、あるいは addEventListener で複数のハンドラを追加する、という形です。

まとめ

window.onloadはページ全体の読み込み完了時に実行されるイベントです。DOM が完成するタイミングとの違いを理解し、現代的な書き方である addEventListenerを取り入れると、他のスクリプトと干渉しにくく安定します。初心者はまず DOMContentLoaded の理解から始め、外部リソースの到着を待つ必要があるときに window.onload を使い分けるとよいでしょう。

window.onloadの関連サジェスト解説

window.onload = function() とは: window.onload = function() とは、ウェブページが読み込み完了したときに自動で実行される関数を設定するための書き方です。ここでの window はブラウザのウィンドウ全体を指し、onload はページ全体の読み込み完了イベントを表します。つまりすべてのリソース（画像や外部ファイル、CSS など）の読み込みが完了したタイミングで、括弧内に書いた処理が実行されます。典型的な使い方は次のようなコードです。 window.onload = function() { // 初期化処理 console.log('ページが完全に読み込まれました'); // 例: ヘッダーの表示を切り替えるなど }; ただしこの方法にはいくつかの注意点があります。第一に window.onload に代入するのは1つの関数だけで、後から別のスクリプトが同じ onload に別の関数を代入すると前の処理は上書きされてしまいます。複数の処理を同時に走らせたい場合は onload の中で他の関数を呼ぶのではなく、別のイベントリスナーを追加する方法を使うべきです。第二に、ページ内のすべてのリソースを待つため、DOM が準備できるだけではなく表示の初期化まで待つことになります。もし DOM の準備が整った時点だけで良い場合には window.onload の代わりに document.addEventListener('DOMContentLoaded', function(){ ... }) を使うと、画像の読み込みを待たずに DOM が利用可能になった時点でコードを実行できます。第三に、現代の開発では addEventListener を使って複数のイベントリスナーを登録する方法が推奨されることが多いです。window.onload の代わりに window.addEventListener('load', function(){ ... }) と書くと、他のライブラリやスクリプトと競合せずに複数の処理を追加できます。実務ではまず DOMContentLoaded を使い、画像の読み込みまで待つ必要がある場合だけ load を使うのが一般的です。最後に、初期化処理を外部の関数にまとめると保守性が高まります。例えば function init(){ /* 初期化処理 */ } window.addEventListener('load', init); のようにすると、後から別のイベントを追加するのも簡単になります。
javascript window.onload とは: javascript window.onload とは、ウェブページがすべての資源を読み込み終えたタイミングで実行されるイベントのことです。ここでいうすべての資源とはHTMLの読み込みだけでなく、画像や動画、外部のスタイルシート、スクリプトファイルなどすべてのファイルがブラウザに取り込まれ終えた状態を指します。このタイミングで何か処理をしたいときに使います。例えばページの準備が整ったら表示を変えたい、ロゴ画像が完全に見えるようになってから初期化処理を走らせたい、などの場面です。window.onload の書き方には主に2つの方法があります。1つ目は window.onload = function() { ... }; です。これはシンプルですが、同じページ内で別の onload ハンドラを設定すると後から設定したものに上書きされてしまい、前の処理が消えることがあります。2つ目は addEventListener を使う方法です。 window.addEventListener('load', function() { ... }); のように書くと、複数の処理を安全に追加できます。補足として、よく比較されるのは DOMContentLoaded イベントです。これは HTML のパースが終わった時点で発火するため、画像の読み込みを待ちません。そのため DOM 操作だけを早く実行したい場合には DOMContentLoaded の方が適しています。順序が大切な場合は両方を使い分けると便利です。実際の運用では、初期表示をすばやく整えるには DOMContentLoaded を使い、画像の読み込み完了後に別の処理を走らせたい場合には window.onload を使う、という分け方をおすすめします。さらに注意点として、モバイル環境や外部リソースが多いページでは onload が呼ばれるまで時間がかかることがあり、表示の遅さにつながることがあります。初心者の方はまず DOMContentLoaded で DOM 操作を済ませ、必要に応じて window.onload で追加の処理を組み立てると良いでしょう。

window.onloadの同意語

window.onload: ブラウザのウィンドウが全体のリソース読み込みを完了したタイミングで発火するイベントです。これに紐づく処理を実行すると、ページの初期化がリソースの読み込み後に安定して行えます。
loadイベント: window.onloadと同じ意味の表現です。ページのロード完了時に発火するイベントを指します。
onloadイベント: HTMLのonload属性や JavaScript の window.onload によって設定されるイベントの名称で、同様にロード完了時に処理を実行します。
window.addEventListener('load', …): モダンな書き方。window に対して load イベントを購読し、読み込み完了時に処理を実行する方法です。
addEventListener('load', …): 同様の意味を持つ別表現。対象は window 以外にも document などに対しても使えますが、ロード完了時の処理を登録します。
DOMContentLoaded: DOM（文書の構造）が完成した時点で発火するイベントです。window.onload より早く発火することが多く、リソースの読み込みは待ちません。初期化で DOM が必要な場合に使われます。
ページ読み込み完了時のイベント: 日本語の言い換え表現。ページの全リソースの読み込みが終わったタイミングで実行するイベントを指します。
ページのロード完了イベント: 同じ意味の別表現。ページ全体の読み込みが完了した時に処理を実行します。
ウィンドウのロード完了イベント: ウィンドウ内の全リソース読み込みが完了した時点で発火するイベントの別表現です。

window.onloadの対義語・反対語

DOMContentLoaded: HTMLの読み込みとDOMの構築が完了した時点で発生するイベント。window.onloadより前に起こることが多く、ページ初期化を早く行いたいときに使われます。
beforeunload: ユーザーがページを離れる直前に発生するイベント。未保存データの確認などを促すために使われることがあります。
unload: ページがアンロード（離れられるとき）されるときに発生するイベント。リソースの解放などに用いられますが、現代の用途は限定的です。
pagehide: ページが非表示になる、または履歴操作で前のページへ移るときに発生するイベント。キャッシュ対応と組み合わせて使われることがあります。
readyState-loading: readyStateが'loading'の状態。ページの読み込みがまだ開始された段階を示し、onloadの前にある状態を表します。
readyState-interactive: readyStateが'interactive'の状態。DOMは構築済みだが、全リソースはまだ読み込まれていない状態。onload以前のタイミングを示す見方として使われます。

window.onloadの共起語

window.onload: ページの全リソースの読み込みが完了した時点で実行される関数を登録するイベントハンドラの書き方。主に HTML が完全に表示される前後の初期化で使います。
onload: window.onload の略。HTML の属性や JavaScript でロード時の処理を割り当てる方法です。
loadイベント: window や文書が「全リソースの読み込み完了」時に発火するイベント。画像やスタイルシートの読み込みが完了した時点を指します。
DOMContentLoaded: HTML の DOM が構築された時点で発火するイベント。画像やスタイルの読み込みを待たず、DOM 操作を早く始めたいときに使います。
addEventListener: イベントを安全に複数登録できる現代的な方法。'load' イベントにも対応しています。
イベントリスナー: イベントが発生したときに実行される関数のこと。window.onload のようなイベントに対する反応を作り出します。
イベントハンドラ: イベントに対応する処理を担当する関数のこと。onload や addEventListener で使われます。
JavaScript: window.onload の処理は主に JavaScript（ウェブページ上の動作を記述する言語）で書きます。
DOM: Document Object Model の略。HTML の要素をツリー状に表現する仕組み。load 後に DOM を操作するケースが多いです。
HTML読み込み: HTML 文書がブラウザに読み込まれる過程。DOMContentLoaded のきっかけにもなります。
ページ初期化: ページ表示時の初期設定。多くの場合 window.onload や DOMContentLoaded で初期化を行います。
クロスブラウザ対応: ブラウザ間で動作を合わせる工夫。古いブラウザと新しいブラウザの挙動差に注意します。
画像読み込み: ページ内の画像が読み込まれるタイミングで load が発火することが多いです。
スタイルシート読み込み: CSS の読み込みが完了するときのタイミングにも影響します。load イベントの発火条件として関連します。
document.readyState: ドキュメントの読み込み状態を表すプロパティ。 'loading'、'interactive'、'complete' などの値を取ります。
defer: script タグの defer 属性。HTML の解析が完了してから実行され、window.onload の発火タイミングに影響を及ぼすことがあります。
async: script タグの async 属性。非同期で読み込み・実行され、順序によって window.onload の動作に影響を与える場合があります。

window.onloadの関連用語

window.onload: ブラウザがウィンドウ全体を読み込んだ直後に発火する古いイベントです。すべての外部リソースの読み込み完了後に実行されます。
DOMContentLoaded: HTML の構文解析と DOM の構築が完了した時点で発火します。画像やスタイルシートなどの外部リソースの読み込みを待ちません。
loadイベント: ウィンドウや画像などの要素で発火するイベントで、すべてのリソースの読み込みが完了したタイミングで起こります。
onload属性: HTMLタグの onload 属性としてイベントハンドラを設定する古い書き方です。
addEventListener load: 新しい標準の方法で、任意の要素に対してロード時の処理を登録します。複数の処理を追加でき、解除も容易です。
removeEventListener load: 登録したイベントリスナーを後から外す方法です。不要になった処理を止めるとメモリ漏れを防げます。
defer属性: 外部スクリプトの実行をHTMLの解析が終わった後まで遅らせる属性です。window.onload までに実行されることを期待せず、 DOMContentLoaded の後に実行されることが多いです。
async属性: 外部スクリプトを読み込みと実行を非同期で行い、他の処理をブロックしません。実行時期は順序が保証されない場合があります。
DOMContentLoadedとwindow.onloadの違い: DOMの準備完了時と全リソースの読み込み完了時の違いを理解すると、初期化のタイミングを正しく選べます。
画像のonloadイベント: 画像要素が読み込み終わったときに発火します。画像の表示処理やレイアウト調整に使われます。
document.readyState: 現在のドキュメントの読み込み状態を表すプロパティです。
readyStateの値: loading は読み込み中、interactive は DOM が作成済み、complete はすべて完了を表します。
jQueryの$(document).ready: ドキュメントの DOM が準備できた時点で実行される処理を定義します。
jQueryの$(window).load: ウィンドウの読み込み完了を待って実行する処理を定義します。現在は推奨されませんが使われることもあります。
実践的な使い方の例: 実務では DOMContentLoaded で初期化、後からリソース依存の処理は window.onload で行うなど、場面に応じて使い分けます。
リソースの読み込みとパフォーマンス: リソースの読み込みが完了するまで待つ必要がある処理は window.onload に、DOM だけ準備ができ次第動かす処理は DOMContentLoaded に置くとパフォーマンスが良くなります。
イベントリスナーの解除: 不要になったイベントリスナーは removeEventListener で削除しましょう。これでメモリ使用を抑えられます。
クロスブラウザ対応: 古いブラウザでは window.onload の挙動や DOMContentLoaded のサポート状況が違う場合があるため、互換性のある実装を心掛けましょう。
iframeとwindow.onload: iframe 内のページでも window.onload が別計測され、親ページとは独立して発火します。
ページライフサイクルイベント: ページの開閉に伴うイベントとして beforeunload や unload も関連しますが、現在は unload は非推奨です。