javascriptのロード中でもほかのファイルのロードを邪魔しない

web

javascriptのロード中は基本的にほかのファイルのロードが行われないのは、一般的なお話ですが(最新のブラウザはパラレルでロードできるからこの範疇ではない)、少しでもサイトの最適化を行うならばパラッルダウンロードはしておきたいところ。

ということで、ほかのファイルのロードを邪魔せずに、ロード完了時にスクリプトが動作する方法がありました。
domscript.onload = function() { domscript.onloadDone = true; init(); }; domscript.onreadystatechange = function() { if ( "loaded" === domscript.readyState && ! domscript.onloadDone ) { domscript.onloadDone = true; init(); } }
onreadystatechangeやonloadイベントを使って、ロードを状態をみてロード完了時にinit関数を実行ですかね。へー、これでパラレルロードができるのかという感じです。実証してないのです。ちなみに、single scriptの場合です。

実証してみました。
` function init(){
alert(“init”);
}

var domscript = document.createElement('script');
domscript.src ="script.js";

domscript.onload = function() { 
    domscript.onloadDone = true; 
    init(); 
};

domscript.onreadystatechange = function() { 
    if ( "loaded" === domscript.readyState && ! domscript.onloadDone ) {
        domscript.onloadDone = true; 
        init();
    }
}
document.getElementsByTagName('head')[0].appendChild(domscript);

` という感じで実行すると、


という具合にjsとimgがパラレルでダウンロードされました。


stevesouders.comより

Comments