HTMLのonloadを徹底解説！7つの使い方とサンプルコード

この記事を読めば、HTMLのonload属性を使ったウェブページの機能向上ができるようになります。

はじめに

HTMLのonload属性は、初心者にとって難しいと感じるかもしれませんが、実際にはとても便利な機能です。

この記事では、onload属性の使い方や注意点、カスタマイズ方法について徹底解説し、サンプルコードも提供します。

これを読めば、あなたもonload属性を使ったウェブページの機能向上ができるようになります。

onload属性は、HTML要素が読み込まれた後に実行されるイベントハンドラです。

これを使うことで、ページや画像の読み込みが完了した際に特定のJavaScriptコードを実行することができます。

onload属性は、主に<body>タグや<img>タグに使用されます。

<body onload="alert('ページが読み込まれました');">
  ...
</body>

このコードでは、ページが読み込まれた後にアラートが表示されます。

さて、それでは具体的な使い方とサンプルコードを見ていきましょう。

<img src="example.jpg" onload="alert('画像が読み込まれました')" alt="サンプル画像" />

このコードでは、画像が読み込まれた後にアラートが表示されます。

<body onload="init();">
  ...
  <script>
    function init() {
      alert('ページが読み込まれました');
    }
  </script>
</body>

このコードでは、ページが読み込まれた後にinit関数が実行され、アラートが表示されます。

<script src="example.js" onload="alert('スクリプトが読み込まれました')"></script>

このコードでは、スクリプトが読み込まれた後にアラートが表示されます。

onload属性の応用例 onload属性を応用することで、さまざまな機能を実現できます。

<body onload="startAnimation();">
  ...
  <script>
    function startAnimation() {
      // アニメーション処理
    }
  </script>
</body>

このコードでは、ページが読み込まれた後にアニメーションを開始します。

<body onload="startCountdown();">
  ...
  <script>
    function startCountdown() {
      // カウントダウン処理
    }
  </script>
</body>

このコードでは、ページが読み込まれた後にカウントダウンタイマーを開始します。

<body onload="initAccordion();">
  ...
  <script>
    function initAccordion() {
      // アコーディオンメニューの処理
    }
  </script>
</body>

このコードでは、ページが読み込まれた後にアコーディオンメニューを初期化します。

<body onload="showModal();">
  ...
  <script>
    function showModal() {
      // モーダルウィンドウの表示処理
    }
  </script>
</body>

このコードでは、ページが読み込まれた後にモーダルウィンドウを表示します。

onload属性を使用する際の注意点として、次のようなことが挙げられます。

これらの問題を回避するために、DOMContentLoadedイベントを使用することも検討してください。

DOMContentLoadedイベントは、HTML文書が解析された後に発火するため、ページ内の要素が完全に読み込まれるのを待たずにイベントを実行できます。

onload属性をカスタマイズすることで、さらに多機能なウェブページを作成することができます。

例えば、複数の関数を連続して実行する場合、下記のようにカスタマイズすることができます。

<body onload="function1(); function2();">
  ...
</body>

この記事では、HTMLのonload属性について、初心者向けに徹底解説しました。

使い方や注意点、カスタマイズ方法についても学び、さまざまな応用例とサンプルコードを提供しました。

これを参考にして、あなたもonload属性を使ったウェブページの機能向上に挑戦してみてください。