Pasek postępu Backbone.js podczas pobierania kolekcji

Question

Chciałbym pokazać pasek postępu, a ja aktualizować aplikację ze świeżą zawartością. Myślę, że najlepszą rzeczą byłoby zrobienie tego podczas wywoływania .fetch w kolekcji.

Zawartość i pobranie to przede wszystkim obrazy (plakat wideo itp.), Ale otrzymuję tylko link, a nie łańcuch podstawowy64 lub coś dużego. Chciałbym nałożyć na ekran pasek postępu podczas pobierania linków graficznych, renderować widok, aby wszystkie obrazy były gotowe, a następnie nakładka powinna zniknąć i pokazać aplikację ze świeżo załadowaną treścią.

Teraz nie mam pojęcia, w jaki sposób mogę zbudować pasek postępu, ponieważ nie jestem naprawdę coraz obrazów bezpośrednio, ale tylko link, a następnie renderowanie widoku.

Answer 1

Oto kilka kroków, które mogą się sprawdzić.

1. podczas uruchamiania fetch (być może za pomocą ajaxStart lub cokolwiek), wychować swój pop-over.
2. po zakończeniu pobierania, zidentyfikuj lub utwórz adresy URL obrazów z JSON i użyj jednego z kilku preloaderów obrazu, które mają wywołanie zwrotne po załadowaniu wszystkich obrazów. Jeśli chcesz zrobić to samemu, powiedziałbym, że będzie to psuedokod:
   1. Prześlij wszystkie swoje obrazy do tablicy imagesurls. (będzie to tablica ciągów znaków).
   2. Uchwycić długość tablicy do zmiennej imagesleft.
   3. Tworzenie funkcji var imageOnLoad = function() {...} uchwycenie tej zmiennej, która
      1. zmniejsza imagesleft przez 1
      2. robi cokolwiek to musi zaktualizować popover
      3. jeśli imagesleft osiągnie 0, powołać się na kod/sposób, aby spowodować popover ostatecznie odejść
   4. dla każdej struny imagesurls[i] w tablicy imagesurls
      1. Utwórz nowy obiekt obrazu. var img = new Image();
      2. img.onload = imageOnLoad;
      3. img.src = imagesurls[i];

Oczywiście jestem ignorując sytuacje błędach (obrazy mają właściwość onerror można przypisać podobnie i oryginalny ajax może nie). ale myślę, że istota rozwiązania jest tam. Zastanawiam się tylko, czy rzeczywiście trzeba zachować odniesienie do każdego z obiektów obrazów podczas ich tworzenia. To może być dobry pomysł, przynajmniej dopóki nie skończysz z całym zestawem obrazów. W przeciwnym razie musiałbym się martwić o zbieranie śmieci, które w jakiś sposób przeszkadzało w implementacji ... ale może po prostu jestem paranoikiem.

Answer 2

Po wywołaniu pobierania ustaw pasek ładowania.

Następnie należy przekazać funkcję options.success do metody fetch (docs), która przeniesie ją na ekran.

Lub, gdy wyrenderujesz obiekty na ekranie, możesz je wtedy pociągnąć w dół.

Używamy tego dla jednego z naszych poglądów i wystarczy pociągnąć go za pomocą metody options.success

Answer 3

Można użyć jQuery ajaxStart i ajaxStop pokazać postęp na początku i ukryć go na końcu. Jednak zrobienie tego w ten sposób wyświetli wskaźnik, a zapytanie o ajax zostanie wykonane na twojej stronie.

Trasę, którą można wykonać, aby ograniczyć ją do konkretnego pobierania, to przesłonięcie metody synchronizacji w tej kolekcji lub modelu i zawijanie domyślnej synchronizacji za pomocą kodu wyświetlającego i ukrywającego pasek postępu.

Answer 4

Przed pobraniem kolekcji należy rozwinąć pasek postępu. Po zakończeniu kolekcji i renderowaniu obrazów do DOM dodaj listeners to the image load events. Po pomyślnym załadowaniu wszystkich obrazów usuń pasek postępu.

Będziesz chciał się upewnić, że słuchasz również błędów ładowania, gdy obraz nie ładuje się, ponieważ pasek postępu nigdy nie zostanie usunięty w takim przypadku.

Answer 5

Spróbuj tego:

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

metody nadpisywania synchronizacji kręgosłup, zamiast pisać każde miejsce dodać go zsynchronizować metody. Będzie działać na nowych stronach bez pisania nowego kodu.