Backbone.js Fortschrittsbalken beim Abrufen der Sammlung

Hier sind einige Schritte, die funktionieren könnten.

1. wenn der Fetch startet (vielleicht mit ajaxStart oder was auch immer), bring hoch Ihr Pop-Over.
2. Wenn der Abruf abgeschlossen ist, identifizieren oder erstellen Sie die Bild-URLs aus dem JSON und verwenden Sie einen der verschiedenen Bild-Preloader, die einen Rückruf haben, sobald alle Bilder geladen sind. Wenn du das selbst machen willst, würde ich sagen, das wäre der psuedocode dafür:
   1. Schiebe alle deine Bilder auf ein Array imagesurls . (Dies wird ein Array von Strings sein.)
   2. Erfassen Sie die Array-Länge in einer Variablen imagesleft .
   3. Erstellen Sie eine Funktion var imageOnLoad = function () {...} , die diese Variable erfasst
      1. dekrementiert imagesleft by 1
      2. Macht alles, was nötig ist, um das Popover zu aktualisieren
      3. Wenn imagesleft 0 erreicht, rufen Sie den Code / die Methode auf, damit das Popover schließlich verschwindet
   4. Für jeden der Strings imagesurls[i] im Array imagesurls
      1. Erstellen Sie ein neues Image-Objekt. %Code%
      2. var img = new Image();
      3. img.onload = imageOnLoad;

Natürlich ignoriere ich Fehlersituationen (Bilder haben eine img.src = imagesurls[i]; -Eigenschaft, die Sie ähnlich zuweisen könnten und der ursprüngliche Ajax könnte fehlschlagen). aber ich denke, der Kern einer Lösung ist da. Das einzige, worüber ich mich wundere, ist, ob Sie tatsächlich einen Verweis auf jedes der Bilderobjekte behalten müssen, während sie erstellt werden. Es könnte eine gute Idee sein, zumindest bis Sie mit dem gesamten Bildset fertig sind. Ansonsten müsste ich mir Sorgen machen, dass die Garbage Collection irgendwie in eine Implementierung eingreift ... aber dann bin ich vielleicht nur paranoid.

Versuchen Sie Folgendes:

Sie könnten jQuery ajaxStart und ajaxStop verwenden, um den Fortschritt beim Start anzuzeigen und ihn am Ende auszublenden. Auf diese Weise wird Ihr Indikator jederzeit angezeigt und eine Ajax-Anfrage wird auf Ihrer Seite gestellt.

Eine Route, die Sie nehmen könnten, wenn Sie sie auf diesen bestimmten Abruf beschränken möchten, wäre, die Synchronisierungsmethode in dieser Sammlung oder dem Modell zu überschreiben und die Standardsynchronisierung mit Code einzuschließen, der die Fortschrittsleiste ein- und ausblendet.

Bevor Sie die Sammlung abrufen, legen Sie die Fortschrittsanzeige auf. Wenn die Sammlung abgeschlossen ist und Sie die Bilder an das DOM rendern, fügen Sie Listener zu den Bildladeereignissen . Wenn alle Bilder erfolgreich geladen wurden, entfernen Sie den Fortschrittsbalken.

Sie sollten sicherstellen, dass Sie auch auf Ladefehler warten, wenn ein Bild nicht geladen wird, da der Fortschrittsbalken in diesem Fall niemals entfernt wird.

Wenn Sie fetch aufrufen, stellen Sie Ihre Ladezeile auf.

Übergeben Sie dann eine Funktion als options.success an die Methode fetch ( Dokumentation ), die sie übernimmt der Bildschirm.

Oder, wenn Sie Ihre Objekte auf dem Bildschirm rendern, können Sie es dann herunterziehen.

Wir verwenden dies für eine unserer Ansichten und ziehen es einfach mit der Methode options.success

Überschreiben Sie die Backbone-Synchronisierungsmethode, anstatt sie an jeder Stelle zu schreiben, fügen Sie sie der Synchronisierungsmethode hinzu. Es funktioniert für neue Seiten, ohne neuen Code zu schreiben.