Wie bekomme ich den Fortschritt eines Herunterladens <script>?

Question

Sagen wir zum Beispiel, ich erstelle ein Spiel. Ich habe ein kleines Skript, dessen Aufgabe es ist, alle Assets zu laden und dem Benutzer einen Fortschrittsbalken anzuzeigen, während die Assets geladen werden.

Ein solches Asset ist ein ziemlich großes Skript, das die Spiellogik enthält. Vielleicht ab 3 MB.

Wie kann ich dem Benutzer den Ladevorgang des zweiten Skripts anzeigen?

Answer 1

<script> Tags nur Feuer load und error Ereignisse; sie feuern nicht progress Ereignisse. In modernen Browsern jedoch Ajax requests do support progress events. Sie können Ihr Skript Inhalt und Überwachung der Fortschritte durch Ajax, und legen Sie dann die Skriptinhalte in ein neues <script> Element laden, wenn der Ladevorgang abgeschlossen ist:

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(); 

Für ältere Browser, die Ajax nicht unterstützen progress, können Sie bauen Ihre Fortschrittsbericht-Benutzeroberfläche, um eine Ladeleiste erst nach dem ersten Ereignis progress anzuzeigen (oder andernfalls einen generischen Spinner anzuzeigen, wenn keine progress Ereignisse ausgelöst werden).

Answer 2

Vielleicht möchten Sie einen Blick haben bei How to show loading status in percentage for ajax response?

Es ist den Status eines AJAX-Download zu sehen. Da Sie ein Skript laden, ist es möglicherweise nicht der beste Weg, um die Datei zu erhalten, aber es könnte funktionieren. Sie müssten dann den Inhalt, der durch den Ajax-Aufruf empfangen wurde, irgendwo zur Ausführung bringen, und eval wird nicht empfohlen.