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.')
});
});
さいごに
先の関数をコピペすれば、すぐに使えますので、ぜひご利用ください。
最終更新日: 2024-08-23