Javascript per download di files multipli (preloader)

[mitma]

Salve a tutti, sto pian piano apportando migliorie al mio sito, arrivando a un punto abbastanza cruciale:

il sito fa uso di contenuti in 3D, nel formato X3D, che sono abbastanza grossi come dimensione, per cui è richiesto un certo tempo per il completo caricamento della pagina. Mi serviva notificare all'utente quando esso è teminato per poter procedere con la navigazione, e il rimedio per ora utilizzato è l'uso di un timer impostato per un discreto eccesso (75 secondi), che dovrebbero essere in genere anche troppi, ma ciò dipende in realtà dalla velocità della connessione della rete e dallo svuotamento o meno della cache del browser dell'utente, qualora il sito sia stato già visitato, ragion per cui insorgono dei tempi di attesa non necessari che vorrei a questo punto risolvere.

Stavo cercando in rete una sorta di preloader, ed ho trovato alcune possibità, come PxLoader e PreloadJS, ma non mi è riuscito adeguarle al mio scopo. Ho continuato la ricerca giungendo a questo ottimo demo che funziona benissimo per il download di un solo file di 10MB. Nel mio caso, invece, ho l'esigenza di veder visualizzato il download di 6 files multipli, che ammontano a un totale di 8856432 bytes (8.9MB):

http://grvsitest.altervista.org/media/source/cartoon_html/BG_0_coordBinary.bin
http://grvsitest.altervista.org/media/source/cartoon_html/BG_0_normalBinary.bin
http://grvsitest.altervista.org/media/source/cartoon_html/BG_0_colorBinary.bin
http://grvsitest.altervista.org/media/source/surface_html/BG_0_coordBinary.bin
http://grvsitest.altervista.org/media/source/surface_html/BG_0_normalBinary.bin
http://grvsitest.altervista.org/media/source/surface_html/BG_0_colorBinary.bin

Ho provato a modificare lo script con dei tentativi che però sono falliti:

Primo tentativo:

 <script type="text/javascript">
var progressCode = $('#progressCode');
var progressContainer = $('#progressContainer');
function updateCode () {
progressCode.text(progressContainer.html());
}
updateCode();

var totalBytes = 8856432; // CHANGE ME WITH THE SIZE OF THE RESOURCE
var req = new XMLHttpRequest();
var urlList = new Array("source/surface_html/BG_0_colorBinary.bin", "source/surface_html/BG_0_coordBinary.bin", "source/surface_html/BG_0_normalBinary.bin", "source/cartoon_html/BG_0_colorBinary.bin", "source/cartoon_html/BG_0_coordBinary.bin", "source/cartoon_html/BG_0_normalBinary.bin");
var progress = $('#download');
progress.attr("max", totalBytes);
req.addEventListener("progress", function (e) {
progress.attr("value", e.loaded).text(Math.floor(100*e.loaded/totalBytes)+" %");
updateCode();
}, false);
req.addEventListener("load", function (e) {
// THE RESOURCE IS LOADED
progress.replaceWith('Downloaded!');
updateCode();
});
for (var x = 0; x < urlList.length; x++) {
req.open("GET","urlList[x]",true);
req.send();
}
</script>

Secondo tentativo:

<script type="text/javascript">
var progressCode = $('#progressCode');
var progressContainer = $('#progressContainer');
function updateCode () {
progressCode.text(progressContainer.html());
}
updateCode();

var totalBytes = 8856432; // CHANGE ME WITH THE SIZE OF THE RESOURCE
var urlList = new Array("source/surface_html/BG_0_colorBinary.bin", "source/surface_html/BG_0_coordBinary.bin", "source/surface_html/BG_0_normalBinary.bin", "source/cartoon_html/BG_0_colorBinary.bin", "source/cartoon_html/BG_0_coordBinary.bin", "source/cartoon_html/BG_0_normalBinary.bin");
var req = new XMLHttpRequest(urlList);
var progress = $('#download');
function listenerForI( i ) {
progress.attr("max", totalBytes);
req.addEventListener("progress", function (e) {
progress.attr("value", e.loaded).text(Math.floor(100*e.loaded/totalBytes)+" %");
updateCode();
}, false);
req.addEventListener("load", function (e) {
// THE RESOURCE IS LOADED
progress.replaceWith('Downloaded!');
updateCode();
});
req.open("GET","urlList[i]",true);
req.send();
}
for( var i = 0; i < urlList.length; i++ ) {
listenerForI( i );
}
</script>

Non sono un esperto di javascript, ma l'autore ha detto che lo script è abbastanza semplice da estendere per il supporto del download di files multipli. Vorrei un aiuto da qualcuno esperto per questa implementazione.

Grazie mille,

un saluto,

Riccardo

 

[mitma]

Risolto

La questione è stata Risolta!