HMTLのonload属性を【徹底解説！】使い方から注意点まで

2024.01.06
デフォルト画像

「Webページを開いた時にでてくるロード画面を実装したい」

「ロード画面を印象的にして、他のWebサイトを差をつけたい」

と思っている人も多いでしょう。

そんな時に使えるのが「onload」属性です。

今回は、

  • onloadとは何か
  • onloadの使い方
  • onloadを使う時の注意点

この3つを中心に解説していきます。

onloadの基礎だけでなく、応用の使い方や注意点の対処法まで盛りだくさんの内容になっています。

onloadを初めて聞くという方でもわかるように、用語から解説していきますので、ぜひ最後まで見てくださいね。

HTMLのイベント属性onloadとは？役割や用語についても解説

「onload」は、Webページの読み込みに応じて何らかの処理を設定することができる、HTMLの属性の一つです。

簡単に説明すると、Gmailのロード画面にでてくる「Mマーク」のアニメージョンがロード中に表示される仕組みです。

onloadをさらに詳しく理解するために、まず以下の用語について理解しましょう。

イベント実行される行動の名称例：マウスが離れたら、ボタンをクリックしたら
イベントハンドライベントが発生した時に、実行するよう定められた処理のこと例：ボタンをクリックしたら、この画像を表示する
DOMHTMLやXMLを自由に操作するための仕組み。「HTMLの○○に、Javascriptの○○という処理を実行させたい」ということを可能にする取り決めのこと。
loadイベントHTMLページに含まれるすべてのリソース（スタイルシートや画像）の読み込みが完了した時点で発生するイベント

onloadはloadイベント発生時のイベント属性

onloadは、HTML内だけでなくJavascript内でも記述されることから「onloadイベント」や「onloadメソッド」などと呼ばれていることもあります。

しかし、正確には「loadイベント」がイベント名で「onload」は属性です。

loadイベントが実行されているため「on load」となっていますが、間違いないようにしましょう。

HTML、Javascripでのonloadの基本的な使い方

onloadを使ってloadイベントを実行する方法は2つ。

1.HTMLに直接onload属性を指定する 2.Javascripでwindow.onloadを使う

どちらも基本的な使い方で、Webページ上に掲載される画像やテキスト、スタイルシートなど「全ての読み込みが完了した後」に処理を実行するプログラムです。

1.HTMLに直接onload属性を指定する

最も簡単で基本的なonloadの使い方は、HTMLのbody要素に直接指定する方法です。

<body onload="test()">
    <!-- body要素にonloadイベントを設定 -->
    <p id="gree"></p>

    <script>
      function test() {
        let gree = document.getElementById('gree');
        // test関数を呼び出し、greeを宣言

        gree.textContent ='こんにちは！';
        // 宣言したgreeをテキストとして表示
      }
    </script>
  </body>

上記のように、scriptをonloadで呼び出して実行する方法が一般的な使い方です。

しかし、アラートなどscriptタグを別途用意する必要がない簡単なイベントを実行する場合は、以下のように直接scriptを書き込むことも可能です。

<body onload="alert('HTMLでonloadを実行しています')">
</body>

onloadに直接scriptを書き込む時には、()内で「;（シングルクオーテーション）」を使いましょう。

ダブルクオーテーションを使ってしまうと、onload属性の値が()内で終了と判断されて上手く動かないので注意してください。

2.Javascripでwindow.onloadを使う

loadイベントをJavascriptで実行する場合は、window.onloadを使います。

window.onload = function() {
  alert('Javascriptでonloadを実行しています')
}

「window」はオブジェクト要素の一つで、Webページ全体を意味します。

つまり、上記の場合「Webページ全体（window）の読み込みが完了した時（onload）」という意味になります。

window部分には、要素の指定ができるので「img」や「body」などの指定を可能です。

他にも、最初に「function 関数()」を指定して、後からwindow.onloadで呼び出して実行する方法もありますが、読み込みも早くスムーズなので上記の方法だけ覚えておけば問題ないでしょう。

【イベント実行タイミング別】onloadの使い方

onloadは「Webページに掲載されるすべてのものの読み込みが完了した時点」で処理を行うのが基本です。

しかし、scriptの配置位置によってonloadの実行タイミングを変えることができます。

1.Webページが読み込まれる前にイベントを実行したい場合 2.HTMLのみ読み込みした後にイベントを実行したい場合

試しにタイミングをずらして実行してみたい場合や、目的に合わせてonloadのタイミングを調整したい場合は参考にしてみてくださいね。

では、それぞれの場合でのonloadの使い方を見ていきましょう。

1.Webページが読み込まれる前にイベントを実行したい場合

Webページがすべて読み込まれる前に、アラートや緊急のお知らせなどイベントを実行したい場合は、HTMLの先頭付近にscriptを書き込みます。

<head>
    <script type="text/javascript">
      alert('今からWebページの読み込みを開始します');
    </script>
</head>

以下のように、別ファイルで読み込むことも可能ですが、Javascriptファイルの読み込みと実行が完了するまでHTMLが読み込まれないので、あまり需要はありません。

<head>
   <script type="text/javascript" src="sample.js"></script>
</head>

別ファイルでJavascriptを読み込む場合は、Webページ全体の読み込みスピードが落ちてしまうので、onloadの基本的な使い方や次に紹介する方法が現実的です。

2.HTMLのみ読み込みした後にイベントを実行したい場合

基本的な方法でonloadを使用すると、HTML内のすべてが読み込まれるまでなので、画像などのデータが重いものも含まれます。

特に、大規模なページになるとWebページが表示されるまで時間がかかるので、onloadの実行も遅くなります。

  • 画像まで読み込みを待つ必要はない
  • なるべく早くonloadを実行したい
  • onloadの実行はHTMLの読み込み完了後に行いたい

などという時には、以下の方法を利用するのが良いでしょう。

<body>
　　.
    .
    <script type="text/javascript">
      alert("HTMLの読み込みが完了しました");
    </script>
  </body>

上記のように、bodyタグの最下部の直前にscriptを書き込めば、HTMLの読み込みが完了次第onloadを実行できます。

また、関数を使って処理を行っている場合は以下のように呼び出すことも可能です。

<body>
　　.
    .
    <script type="text/javascript">
      test();

　　　// test関数を呼び出して実行します
    </script>
  </body>

JSファイルを別途読み込む場合も同様で、bodyタグ最下部の直前にscriptタグを記載しましょう。

onloadを使う時の注意点！解決方法も紹介

Webサイトの読み込みに合わせてイベントを実行できるonloadですが、使う時には2つ注意点があります。

  • window.onloadは複数書くと上書きされてしまう
  • onloadはイベント実行までに時間がかかる

window.onloadをいくつ記述しても、一番下のものが新しく上書きされてしまうので注意が必要です。

また、onloadは、Webサイトを構築している階層の一番上にあたるオブジェクトなので、どうしてもHTML文書全体を読み込むのに時間がかかります。

これらの問題を解決する方法もそれぞれ紹介していきます。

onloadイベントを複数使用したい時には「addEventListener()」

「addEventListener()」は、対象とする特定のイベントが発生するたびに呼び出される関数を設定することができるメソッドで、以下のように使用します。

window.addEventListener('load', function() {
  console.log('Javascript');
})

window.onload = function() {
  console.log('HTML');
}

window.onload = function() {
  console.log('CSS');
}

複数のイベントをすべてwindow.loadで記述した場合、最後の「CSS」のみが出力されます。

しかし、上記の場合は1行目に「addEventListener()」メソッドを使用したイベントが優先されるので、「Javascript」と出力されます。

また、以下のように「addEventListener()」を利用するとイベントを複数出力することが可能です。

window.addEventListener('load', function() {
  console.log('HTML');
})

window.addEventListener('load', function() {
  console.log('CSS');
})

window.addEventListener('load', function() {
  console.log('Javascript');
})

上記の場合は

HTML CSS Javascript

と出力されます。

onloadイベントの実行を速くする「DOMContentLoadedイベント」

onloadはJavascriptによって実行されますが、実は、Webページに関する全てのものを読み込むまで待たなくても実行可能なのです。

そもそもJavascriptは、DOMを扱うことでHTMLをコントロールする仕組みになっています。

DOMを扱えるようになるのは、「ツリー構造」さえ完了してしまえば可能なので、HTML文書全体を読み込まなくても利用できるということになるのです。

そんな仕組みを応用して使えるのが「DOMContentLoadedイベント」です。

「DOMContentLoaded」は、DOMのツリー構造が完了した時点で実行することができるイベントなので、onloadイベントよりも速く動作するようになります。

使い方はloadイベントと似ていて

window.addEventListener('DOMContentLoaded', function() {
 
    // 実行したい処理を書く
 
})

このように記述します。

先ほどの「addEventListener()」メソッドのコードを使用すると以下のようになります。

window.addEventListener('load', function() {
  console.log('HTML');
})
window.addEventListener('load', function() {
  console.log('CSS');
})
window.addEventListener('DOMContentLoaded', function() {
  console.log('Javascript');
})

上記の場合の出力結果は

Javascript HTML CSS

という順番になります。

複数のonloadを記述し、優先したいイベントがある場合には「DOMContentLoadedイベント」が利用できますよ。

まとめ：HTMLとJavascripでonloadを使えばロード時間も楽しくなるWebサイトが作れる

今回は、onload属性やloadイベントの様々なパターンの使い方について紹介しました。

onloadを使いこなせれば、Webページを表示する前のアニメーションを設定するなどして、他のWebサイトと差をつけることも可能です。

しかし、「実行に時間がかかる」「複数使用する時には注意が必要」などといった注意点もあります。

基本的な使い方だけでなく、対処法や様々なパターンに合わせた使い方をマスターして、Webページの起動時にも工夫を加えましょう。

プログラミングやパソコンを使って働きたい！

そのように考え、成長しているIT業界への転職を考えている方も増えてきました。

『IT業界に興味はあるけど、よくわからない…』
『パソコンとかそもそも苦手なのに私なんかにできるのかな』
『エンジニアって聞くけど難しそう』

反対にこのような声も聞く事があります。

そう考えている方は、一度ぜひ転職に成功したエンジニアの方のインタビューをご覧ください！

＼プログラミングを学んで／
人生を変えた3名

インタビュー記事一覧 ＞

＼プログラミングスクールを比較／

DMM WEBCAMP

COACHTECH

RUNTEQ
DMM WEBCAMP COACHTECH RUNTEQ
目指せる姿 WEBエンジニアへの転職
 フリーランスエンジニア WEBエンジニアへの転職
分割払い ○ ○ ○
補助金 ○ × ○
転職保証 ○ × ×
受講期間 12週間〜 3ヶ月〜 5ヶ月〜
特徴 【IT業界の転職を一番に考えたい方向け】
大手DMMが運営のプログラミングスクール
転職成功率98.8%
豊富なキャンペーンや補助金制度あり 		【フリーランスを目指したい方向け】
フリーランスのエンジニアを最短で目指す
エンジニアと共に実際の案件開発を担当 		【とことん勉強してから転職したい方向け】
1,000時間（約9カ月）のカリキュラムでしっかり勉強
企業の求める即戦力のWEBエンジニアを目指す
料金 329,350円〜
※給付金適用後		 42万9,000円~ 55万円

公式HP

公式HP

公式HP

関連記事

  • 「Rails」入門の説明書

    【Rails入門説明書】loggerについて解説

    2024.01.29
  • 【2022年最新版】茨城のプログラミングスクールを徹底比較！

    【2022年最新版】茨城のプログラミングスクールを徹底比較！

    2024.01.29
  • HTML入門

    【HTML初心者入門】セルの結合をrowspan 属性を使って行う方法を解説

    2024.01.04
  • CSSはセレクタを理解しないと始まらない

    【学習必須】CSSはセレクタを理解しないと始まらない

    2024.01.03

    • 資料請求

    • 短期集中で最速エンジニア転職を実現-転職成功者インタビュー一覧

      DMM WEBCAMPでは転職成功率98％を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

      資料をダウンロードする
    • IT技術がもたらす3つの変化と身につけるべきスキル

      IT技術の発展により、今後10~20年程度で47％の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

      資料をダウンロードする
    • 未経験がフリーランスエンジニアになる方法-年収アップで自由な働き方を手に入れる

      働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

      資料をダウンロードする

    資料請求一覧はこちら

    サービス紹介

    © 2024 WEBCAMP MEDIA Powered by AFFINGER5