HTMLページの読み込み後にスクリプトを読み込む方法


  1. イベントリスナーを使用する方法:

    <script>
     window.addEventListener('load', function() {
       // スクリプトの読み込み処理
     });
    </script>
  2. defer属性を使用する方法:

    <script src="script.js" defer></script>

    この方法では、スクリプトの読み込みがHTMLのパースと同時に行われ、ページの読み込みが完了した後に実行されます。

  3. async属性を使用する方法:

    <script src="script.js" async></script>

    この方法では、スクリプトの読み込みと実行が非同期に行われます。スクリプトの読み込みが完了したら、その時点で実行されます。

  4. JavaScriptのDOMContentLoadedイベントを使用する方法:

    <script>
     document.addEventListener('DOMContentLoaded', function() {
       // スクリプトの読み込み処理
     });
    </script>

    この方法では、DOMの構築が完了した後にスクリプトが実行されます。

これらの方法は、HTMLページの読み込みとスクリプトの実行のタイミングを制御するためのものです。適切な方法は、特定の要件やスクリプトの目的によって異なります。