Backbone.js barra di avanzamento durante il recupero raccolta

Question

mi piacerebbe mostrare una barra di avanzamento, mentre io aggiornare l'applicazione con nuovi contenuti. Credo che la cosa migliore da fare sarebbe farlo mentre si chiama .fetch su una collezione.

Il contenuto prelevo è in primo luogo le immagini (video manifesto ecc) ma ottengo solo il link, non è una stringa base64 o di qualcosa di grande. Quello che mi piacerebbe fare è sovrapporre lo schermo con una barra di avanzamento durante il recupero dei link immagine, renderizzare la vista in modo che tutte le immagini siano pronte e quindi la sovrapposizione dovrebbe sparire e mostrare l'app con il nuovo contenuto già caricato.

Ora non ho idea di come sia possibile creare una barra di avanzamento per questo poiché non sto ottenendo direttamente le immagini ma solo il collegamento e quindi il rendering della vista.

Answer 1

Ecco alcuni passaggi che potrebbero funzionare fuori.

1. quando l'operazione di recupero inizia (magari usando ajaxStart o qualsiasi altra cosa), far apparire tuo pop-over.
2. al termine del recupero, identificare o creare gli URL immagine dal JSON e utilizzare uno dei numerosi precaricatori di immagini che dispongono di una richiamata ogni volta che vengono caricate tutte le immagini. Se si vuole fare che voi stessi, direi che questo sarebbe il psuedocodarlo per questo:
   1. spingere tutte le vostre immagini in un array imagesurls. (questo sarà un array di stringhe).
   2. Cattura la lunghezza dell'array in una variabile imagesleft.
   3. creare una funzione var imageOnLoad = function() {...} catturare quella variabile che
      1. decrementa imagesleft da 1
      2. fa tutto ciò di cui ha bisogno per aggiornare il popover
      3. se imagesleft raggiunge 0, richiamare il codice/metodo per provocare la popover alla fine andare via
   4. Per ciascuna delle stringhe imagesurls[i] nella matrice imagesurls
      1. crea un nuovo oggetto Immagine. var img = new Image();
      2. img.onload = imageOnLoad;
      3. img.src = imagesurls[i];

Naturalmente sto ignorando situazioni di errore (immagini hanno una proprietà onerror è possibile assegnare allo stesso modo e l'ajax originale potrebbe fallire). ma penso che l'essenza di una soluzione sia lì. L'unica cosa che mi sto chiedendo è se hai effettivamente bisogno di mantenere un riferimento a ciascuno degli oggetti delle immagini mentre vengono creati. Potrebbe essere una buona idea, almeno finché non hai finito con l'intero set di immagini. Altrimenti, dovrei preoccuparmi della raccolta dei rifiuti in qualche modo interferendo in qualche implementazione ... ma forse sono solo un paranoico.

Answer 2

Quando si chiama recuperare mettere la vostra barra di caricamento.

Quindi passare una funzione come options.success al metodo fetch (docs) che prende lo schermo.

Oppure, quando si esegue il rendering gli oggetti sullo schermo si può tirare giù allora.

usiamo questo per uno dei nostri punti di vista e solo tirarlo fuori con il metodo options.success

Answer 3

Si potrebbe utilizzare jQuery ajaxStart e ajaxStop per mostrare i progressi di inizio e nasconderlo in testa. In questo modo, tuttavia, mostrerà il tuo indicatore in qualsiasi momento e verrà richiesta una richiesta sulla tua pagina.

Un percorso che si potrebbe prendere se si vuole limitarla ad una quella particolare prendere sarebbe quello di ignorare il metodo di sincronizzazione in quella collezione o modello e avvolgere la sincronizzazione di default con un po 'di codice che mostra e nasconde la barra di avanzamento.

Answer 4

Prima si recupera la collezione mettere la barra di avanzamento. Quando la raccolta è terminata e stai visualizzando le immagini sul DOM aggiungi listeners to the image load events. Quando tutte le immagini sono state caricate correttamente, rimuovere la barra di avanzamento.

Si vorrà assicurarsi che si stia ascoltando anche per errori di caricamento in caso non venga caricata un'immagine poiché la barra di avanzamento non verrebbe mai rimossa in quel caso.

Answer 5

Prova questo:

var SomeView = Backbone.View.extend({ 
    loadStuff: function(){ 
     var self = this; 
     someModel.fetch({ 
      xhr: function() { 
       var xhr = $.ajaxSettings.xhr(); 
       xhr.onprogress = self.handleProgress; 
       return xhr; 
      } 
     }); 
    }, 
    handleProgress: function(evt){ 
     var percentComplete = 0; 
     if (evt.lengthComputable) { 
      percentComplete = evt.loaded/evt.total; 
     } 
     //console.log(Math.round(percentComplete * 100)+"%"); 
    } 
}); 

Answer 6

metodo di sovrascrittura spina dorsale di sincronizzazione, invece di scrivere ogni luogo inserirlo sincronizzare metodo. Funzionerà per le nuove pagine senza scrivere alcun nuovo codice.