jQuery Preloader
Taggato: download, file multipli, jquery, preloader
- Questo topic ha 5 risposte, 2 partecipanti ed è stato aggiornato l'ultima volta 11 anni fa da Riccardo.
- AutorePost
- 16 Aprile 2013 alle 16:26 #4551RiccardoPartecipante
Ciao a tutti, vorrei estendere lo script di questo demo per poter quantificare invece il download di una lista di files caricati all’apertura del mio sito, che fa uso di un file X3D abbastanza grosso (8.9MB). Quel file X3D in realtà è incorporato nell’html e il peso fa riferimento a 6 files.bin di 8.9MB (l’intera pagina ha invece un peso di 11MB).
Il mio problema è quindi passare una lista di files (che posso leggere usando lo strumento di sviluppo del browser Google Chrome all’apertura del sito, nella scheda Network) in quello stesso demo. Premetto che non sono esperto di javascript e jQuery, per cui ho continuato la ricerca sul web, trovando questo sito dove c’è l’uso dell’array per raccogliere una lista di files. Ora stavo provando a integrarla nel demo, ma i tentativi provati sono falliti (test 1, test 2), per cui eccomi iscritto a questo Forum.
Il demo, per un unico file presente sul mio sito, funziona bene, come vedete in questo test 3.
Come posso estendere il demo al download di files multipli, come quei 6 contenuti nell’array del test 1? L’autore dice che è abbastanza semplice farlo, ma provato a contattarlo (vedete i commenti alla fine), non mi ha detto più di tanto.
Grazie per l’aiuto e un saluto a voi tutti,
Riccardo
17 Aprile 2013 alle 13:25 #4555jqueryitaliaAmministratoreCiao Riccardo e benvenuto!
Prova a verificare se questa soluzione funziona:
var totalBytes = '44168' // Peso totale in bytes tuoi file var progress = $( '#download' ); progress.attr( 'max', totalBytes ); progress.attr( 'value', 0).text( '0%' ); var loadedResources = 0; var deferreds = []; var resList = [{"nome":"bg.png","peso":136},{"nome":"bigcan.png","peso":4096},{"nome":"leftside.png","peso":1024},{"nome":"logo1t.png","peso":3072},{"nome":"masthead.png","peso":32768},{"nome":"logo.jpg","peso":3072}] $.each(resList, function(index, res) { var load = $.ajax({ type: "GET", url: res.nome, context: progress }).done(function() { loadedResources += res.peso; progress.attr("value", loadedResources).text( Math.floor( 100 * (loadedResources/totalBytes) )+" %"); }); deferreds.push(load); }); $.when.apply(this, deferreds).then(function() { progress.replaceWith("<div>Downloaded!</div>"); });
Io l’ho testata con file molto piccoli e non sono sicuro del risultato… 😉
Buon lavoro!
18 Aprile 2013 alle 01:56 #4558RiccardoPartecipanteCiao Davide (immagino che sia tu..)! Grazie mille per la risposta e l’aiuto…finalmente ho risolto. Non trovavo nessuno che mi desse una mano finché è successo e ne sono felicissimo…..:). Grazie anche a te per il tuo codice!! Ho comunque finalmente risolto il problema al sito e l’ho aggiornato proprio ora. Ho trovato l’aiuto alla casa Madre di jQuery :).
Ne approfitto per un’altra cosa però: mi stavo loggando appena adesso sul tuo Forum per risponderti, ed è uscita una schermata di errore, ma non ricordo se è la stessa dell’altra volta; ho fatto una foto allo schermo pensando di spedirtela! Te la invio attraverso i contatti come l’altra volta!
Un saluto e ancora grazie per l’attenzione.
Alla prossima ;),
Ciao,
Riccardo
18 Aprile 2013 alle 02:06 #4559RiccardoPartecipante…Non so come allegartela…la carico sul mio server e ti lascio un link…scaricatela poi appena possibile, ok?
Ciao Davide,
Riccardohttp://grvsitest.altervista.org/temp/errore_jQuery_Italia.png
18 Aprile 2013 alle 09:18 #4560jqueryitaliaAmministratoreGrazie Riccardo per lo screenshot: come immaginavo è il solito errore inspiegabile che ogni tanto succede (puoi pure eliminarlo dal tuo host)
Vedo con piacere che hai risolto con uno script che non si allontana di molto da quello che ti ho suggerito io… 😉
Ti voglio far notare comunque alcune cose:
1. nella prima chiamata ajax viene utilizzato il type: ‘HEAD’ che non esiste
2. non ha alcun senso (in questo caso) utilizzare una chiamata ajax dentro un’altra chiamata ajax.Per questo ti allego il mio script precedente, modificato per quello che ti serve:
$(function () { var totalBytes = '8856432' // Peso totale in bytes tuoi file var progress = $( '#download' ); progress.attr( 'max', totalBytes ); progress.attr( 'value', 0).text( '0%' ); var loadedResources = 0; var deferreds = []; var fileList = ["temp/BG_0_colorBinary-1.bin", "temp/BG_0_colorBinary.bin", "temp/BG_0_coordBinary-1.bin", "temp/BG_0_coordBinary.bin", "temp/BG_0_normalBinary-1.bin", "temp/BG_0_normalBinary.bin"] $.each( fileList, function(index, file) { var load = $.ajax({ type: "GET", url: file, context: progress }).done( function( data, textStatus, jqXHR ) { loadedResources += parseInt( jqXHR.getResponseHeader('Content-Length') ); console.log( loadedResources ); progress.attr("value", loadedResources).text( Math.floor( 100 * (loadedResources/totalBytes) )+" %"); }); deferreds.push(load); }); $.when.apply(this, deferreds).then(function() { progress.replaceWith("<div>Downloaded!</div>"); }); });
Complimenti comunque per i due siti che hai realizzato: molto gradevoli ed interessanti!
Buon lavoro!
18 Aprile 2013 alle 10:29 #4561RiccardoPartecipanteCiao Davide…almeno così ho potuto testimoniare l’errore…non è bello approdare sul Forum declarando problemi al sito ;)…
Non posso esprimermi sui contenuti del codice, perché non me ne intendo affatto, ma l’autore è una persona molto esperta e di lunga esperienza, come ho potuto apprendere dalla lunga discussione :)… Al post 30, alla mia domanda se il download di quei 6 files.bin mediante quello script li sottraeva dalla lista dei files da caricare per il loading dell’intera pagina, o se i 6 files venissero poi scaricati 2 volte, mi ha detto che il download di ciascun file avviene una volta sola, e poi ha precisato:I download each file one time. I also make a quick HEAD request to determine the size before downloading GET.
A HEAD request just returns the headers (no data). And it is very quick.
Devo ancora studiarmi lo script per capirne la logica, e questa cosa la devo capire meglio, ma forse, avendo fatto un preloader con una barra di progressione ed una percentuale reale di caricamento, quella richiesta HEAD, come ha detto, permette di conoscere la sola dimensione totale del download da iniziare (senza scaricare ancora nulla), per attribuirgli credo il 100%, sfruttato poi per ricavarne la percentuale considerando la dimensione scaricata (loaded) avviata con l’altra richiesta (GET) per iniziare il download. Posso solo dire che funziona a meraviglia, finalmente….. Prima avevo fatto uso di un timer settato a un tempo fisso abbastanza grosso (75 secondi), che dava un’attesa tediosa… Ora è perfetto 🙂
Grazie tantissimo per i complimenti al mio sito :)…non sono un esperto e il codice è stato un collage a mano con gedit sotto linux..quindi niente dreamweaver, che mi piacerebbe anche saper usare, e forse sicuramente verrebbe anche meglio, con più esperienza :)…Grazie tante anche per aver adeguato il tuo codice al caso che avevo; mi sarà più facile capirne le analogie e differenze!!
Grazie di tutto, e spero che anche tu riesca a risolvere il tuo problema con il server (comunque il sito è pur sempre agibile!). Allora cancello lo screenshot.
Un grosso saluto e buona giornata!
Ciao,
Riccardo - AutorePost
- Devi essere connesso per rispondere a questo topic.