[JS] ページ読み込みが終わったら実行する

2023年1月22日

JavaScript が先に実行されてしまうことで、エラーなることがあります。headタグにスクリプトを書いた場合などは、HTMLが読み込み終わる前に実行されてしまうことになります。スクリプトで必要なコンテンツがない場合はエラーとなってしまう可能性があります。
そのため、読み込み終わってから実行したい場合があります。DOMContentLoaded は、DOMができあがってから、load は画像なども読み込み終わってから実行されます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
</head>
<body>
<script>
    document.addEventListener('DOMContentLoaded', function(){
        console.log('DOMContentLoaded');
    });
    window.addEventListener('load', function(){
        console.log('load');
    });
</script>
</body>
</html>

「DOMContentLoaded」は、ドキュメントが解析されてスクリプトが実行されてからイベントが発生します。「load」はさらに遅く、ページ（画像などを含む）が完全に読み込まれたタイミングになります。

JavaScript,プログラミングJavaScript

Posted by kidatti