[JavaScript] JSファイルやCSSファイルを遅延読込をする方法
2 min read
方法
CSS
var link = document.createElement("link");
link.type = "text/css";
link.rel = "stylesheet";
link.href = "ファイル名.css";
document.head.appendChild(link);
JavaScript
var script = document.createElement("script");
script.async = true;
script.defer = true;
script.src = "ファイル名.js";
document.head.appendChild(script);
script 要素の async, defer の説明はこちらが分かりやすいかも。
→ HTML5 の script 要素で async, defer を使ってパフォーマンスアップ - IT-Walker on hatena
上記のスクリプトでは async と defer を同時に指定しています。その説明も
asyncとdeferを同時に指定すると、ブラウザasyncをサポートしているならその動作を、asyncをサポートしていないならdefer時の動作を行わせることが出来ます。asyncをサポートしていない古いブラウザ上でも、非同期でJavaScript実行されるように代替動作をさせることが出来る訳です。(ただし、読み込み中ページはブロックする)とありますので興味のある方は読んでみるといいかも。