<script>のダウンロードの進捗状況を取得するにはどうすればよいですか？

Question

たとえば、ゲームを作成しているとします。私は、すべてのアセットをロードし、アセットがロードされている間にプログレスバーをユーザに提示するという小さなスクリプトを持っています。

このような資産の1つは、ゲームロジックを含む比較的大きなスクリプトです。おそらく3MB以上です。

2番目のスクリプトの読み込みの進行状況をユーザーに表示するにはどうすればよいですか？

Answer 1

<script>タグのみ火災loadとerrorイベント;彼らはprogressイベントを起動しません。しかし、現代のブラウザでは、Ajax requests do support progress eventsです。あなたのスクリプトの内容をロードするとAjaxによる進行状況を監視して、負荷が完了したときに新しい<script>要素にスクリプトの内容を置くことができます。

var req = new XMLHttpRequest(); 

// report progress events 
req.addEventListener("progress", function(event) { 
    if (event.lengthComputable) { 
     var percentComplete = event.loaded/event.total; 
     // ... 
    } else { 
     // Unable to compute progress information since the total size is unknown 
    } 
}, false); 

// load responseText into a new script element 
req.addEventListener("load", function(event) { 
    var e = event.target; 
    var s = document.createElement("script"); 
    s.innerHTML = e.responseText; 
    // or: s[s.innerText!=undefined?"innerText":"textContent"] = e.responseText 
    document.documentElement.appendChild(s); 

    s.addEventListener("load", function() { 
     // this runs after the new script has been executed... 
    }); 
}, false); 

req.open("GET", "foo.js"); 
req.send(); 

アヤックスprogressをサポートしていない古いブラウザの場合は、あなたがあなたのを構築することができます進捗報告UIを使用して、最初のprogressイベントの後にローディングバーを表示します（そうでなければ、progressイベントが発生しない場合は一般的なスピナーを表示します）。

Answer 2

あなたはそれがAJAXのダウンロードのステータスを確認することですHow to show loading status in percentage for ajax response?

を見ているのが好きかもしれません。スクリプトをロードするので、ファイルを取得する最善の方法ではないかもしれませんが、それは動作する可能性があります。次に、ajax呼び出しで受け取ったコンテンツをどこかに置く必要があり、evalはお勧めできません。