jsファイルを遅延ロードする

2023-10-12

HTMLでJavaScriptの外部ファイルを扱う場合、基本的にはHTML内にscriptタグを書いてJSファイルをロードします。この場合、ページロード時にjsファイルがロードされることになりますが、それを遅延させる方法の紹介です。

目次

利用シーン

一般的には「ページの表示速度を早くするために、遅延読み込みさせましょう」という形でこの方法が紹介されていますが、弊社では、

  • Webフォントを確実に適用させるためにHTMLを動的に書き換えた後にWebフォントを読み込む
  • 特定の機能を使う時だけ必要なライブラリを読み込む

といった使い方をすることが多いです。

動作サンプル(CodePen)

ボタンを押すとjQueryが読み込まれ、読み込みが終わるとアラートが出ます。
また、確かにjQueryがロードされている確認として、ボタンの下部にテキストを追記しています。

コード解説

JavaScript
function loadJS(_url, _loadedFunc){
  const add_script = document.createElement('script');
  add_script.src = _url;
  add_script.onload = _loadedFunc;
  document.body.appendChild(add_script);
}
  • <body>の最後に動的に<script src="ロードするJSのパス（_url）">をappendChild()で追加しています。
  • ロードが完了したときに、.onloadでロード後に実行したいスクリプト（_loadedFunc）が呼び出されるように設定しています。

これらを関数として囲んでいますので、任意のタイミングで呼び出すことができます。

上の例では、以下のようにjQueryのCDNパスを指定し、読み込まれたらアラートとHTMLの書き換えを行っています。

JavaScript
document.getElementById('btn_load').addEventListener('click',function(){  loadJS('https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js', function(){
  alert('JS LOADED!');
  $('#msg').html('This text wrote with jQuery.')
 });
});

さいごに

先の関数をコピペすれば、すぐに使えますので、ぜひご利用ください。

関連記事