javascript - How can I get the progress of a downloading <script>? -

let's say, example, i'm creating game. have small script job load assets , present progress bar user while assets load.

one such asset rather large script contains game logic. perhaps upwards of 3 mb.

how can show loading progress of second script user?

<script> tags fire load , error events; not fire progress events. however, in modern browsers, ajax requests do support progress events. can load script content , monitor progress through ajax, , place script contents new <script> element when load completes:

var req = new xmlhttprequest();  // report progress events req.addeventlistener("progress", function(event) {     if (event.lengthcomputable) {         var percentcomplete = event.loaded / event.total;         // ...     } else {         // unable compute progress information since total size unknown     } }, false);  // load responsetext 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() {         // runs after new script has been executed...     }); }, false);  req.open("get", "foo.js"); req.send(); 

for older browsers don't support ajax progress, can build progress-reporting ui show loading bar after first progress event (or otherwise, show generic spinner if no progress events ever fire).