Come posso ottenere lo stato di download <script>?

Question

Diciamo, per esempio, sto creando un gioco. Ho un piccolo script il cui compito è caricare tutte le risorse e presentare una barra di avanzamento all'utente mentre le risorse vengono caricate.

Una risorsa di questo tipo è uno script piuttosto grande che contiene la logica di gioco. Forse verso l'alto di 3 MB.

Come è possibile visualizzare l'avanzamento del caricamento del secondo script per l'utente?

Answer 1

<script> tag solo incendio load e error eventi; non sparano gli eventi progress. Tuttavia, nei browser moderni, Ajax requests do support progress events. È possibile caricare il contenuto dello script e monitorare i progressi attraverso l'Ajax, e quindi posizionare il contenuto dello script in un nuovo elemento <script> quando il carico completa:

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

Per i vecchi browser che non supportano Ajax progress, si può costruire il interfaccia utente di reporting progressivo per mostrare una barra di caricamento solo dopo il primo evento progress (o in caso contrario, mostrare uno spinner generico se nessun evento progress viene attivato).

Answer 2

Come si potrebbe dare un'occhiata a How to show loading status in percentage for ajax response?

E 'per visualizzare lo stato di una scarica AJAX. Dal momento che stai caricando uno script, potrebbe non essere il modo migliore per ottenere il file ma potrebbe funzionare. Dovresti quindi inserire il contenuto ricevuto dalla chiamata ajax da qualche parte per l'esecuzione, e eval non è raccomandato.