[JavaScript/CSS] 遅延読込をする方法

いわゆる、俺俺スクリプトなので、色々と確認のために調べてたら
もっと良さげなスクリプトを見つけてしまったので、そちらを参考にして頂きたい感じではあります。

(CSSの読込は後述のリンク先にはないので注意)

CSS:

<script>
(function(d){
    var c = d.createElement('link');
        c.type = 'text/css';
        c.rel  = 'stylesheet';
        c.href = 'ファイル名.css';
    var s = d.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(c, s);
})(document);
</script>

JavaScript:

<script>
(function(d){
    var e = d.createElement('script');  
        e.type = 'text/javascript';
        e.async = true;
        e.defer = true;
        e.src = 'ファイル名.js';  
    var s = d.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(e, s);
})(document);
</script>

script要素のasync, deferの説明はこちらが分かりやすいかも。
HTML5のscript要素でasync, deferを使ってパフォーマンスアップ – IT-Walker on hatena
上記のスクリプトではasyncとdeferを同時に指定しています。その説明も

asyncとdeferを同時に指定すると、ブラウザasyncをサポートしているならその動作を、asyncをサポートしていないならdefer時の動作を行わせることが出来ます。asyncをサポートしていない古いブラウザ上でも、非同期でJavaScript実行されるように代替動作をさせることが出来る訳です。(ただし、読み込み中ページはブロックする)

とありますので興味のある方は読んでみるといいかも。

また、こちらにはもっとシャレオツでエレガントなコードがあります。
scriptのdefer/asyncを理解し、ページの高速化方法を探る | ゆっくりと…

<script type="text/javascript">
function loadScript(src, callback) {
    var e = document.createElement('script');
    if (e.readyState) { // IE
        e.onreadystatechange = function() {
            if (e.readyState == 'loaded' || e.readyState == 'complete') {
                e.onreadystatechange = null;
                callback();
            }
        };
    } else { // Others
        e.onload = function() {
            callback();
        };
    }
    e.type = 'text/javascript';
    e.async = true;
    e.src = src;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(e, s);
}
// スクリプトの非同期読み込みと起動
loadScript('a.js', function() {
    kickoff();
});
</script>
twitterfacebookhatenafacebook