Fine Uploader-Sitzung Thumbnails langsam zu laden

Question

Ich erstelle ein Mockup-Datei-Upload-Tool für eine Community-Site mit Fine Uploader.

Ich habe die Sitzung eingerichtet, um die ursprünglichen Dateien vom Server zusammen mit einer Miniaturansicht URL abrufen.

Alles funktioniert gut, aber das Rendern der Vorschaubilder ist wirklich langsam. Ich kann nicht herausfinden warum. Also habe ich fest programmiert, ein sehr kleines Thumbnail für jede der vier Dateien zu verwenden. Dies machte keinen Unterschied.

Die Serverseite nicht das Problem. Die Information kommt sehr schnell zurück.

Mache ich etwas falsch? Warum ist der Fineuploader so langsam? Hier ist Screenshot. Es dauert vier Sekunden, um die vier Vorschaubilder zu rendern.

ich letzte Chrom bin mit. Es ist ein NancyFX-Projekt auf einer ziemlich leistungsfähigen Maschine. Andere Seiten mit großen Bildern zu bearbeiten, ist bissig.

Client-Seite Code:

thumbnails: { 
       placeholders: { 
        waitingPath: '/Content/js/fine-uploader/placeholders/waiting-generic.png', 
        notAvailablePath: '/Content/js/fine-uploader/placeholders/not_available-generic.png' 
       } 
      }, 
      session: { 
       endpoint: "/getfiles/FlickaId/342" 
      }, 

Server-Side-Code:

 // Fine uploader makes session request to get existing files 
     Get["/getfiles/FlickaId/{FlickaId}"] = parameters => 
     { 
      //get the image files from the server 
      var i = FilesDatabase.GetFlickaImagesById(parameters.FlickaId); 

      // list to hold the files 
      var list = new List<UploadedFiles>(); 

      // build the response data object list 
      foreach (var imageFile in i) 
      { 
       var f = new UploadedFiles(); 

       f.name = "test-thumb-small.jpg"; // imageFile.ImageFileName; 
       f.size = 1; 
       f.uuid = imageFile.FileGuid; 
       f.thumbnailUrl = "/Content/images/flickabase/thumbnails/" + "test-thumb-small.jpg"; // imageFile.ImageFileName; 

       list.Add(f); 
      } 

      return Response.AsJson(list); // our model is serialised by Nancy as Json! 

     }; 

Answer 1

Das ist von Entwurf und wurde sowohl den UI-Thread von geflutet mit der Bildskalierungslogik zu verhindern, implementiert und Verhindern eines Problems mit dem Speicherverlust, das für Chrome spezifisch ist. Dies wird in den Miniaturen und Voransichten Abschnitt der Dokumentation erklärt, speziell in the "performance considerations" area:

Für Browser, die Client-generierte Bildvorschau (qq.supportedFeatures.imagePreviews === true), eine konfigurierbare Pause zwischen template- unterstützen erzeugte Vorschau ist in Kraft. Dies verhindert, dass der komplexe Prozess der Generierung von Vorschaubildern die CPU der Client-Maschine für eine längere Zeit erdrückt. Ohne diese Beschränkung besteht die Gefahr, dass der Browser-UIhread blockiert wird, und verhindert jegliche Benutzerinteraktion (Scrollen usw.), bis alle Vorschaubilder generiert wurden.

Sie können diese Pause über the thumbnails option einzustellen oder entfernen, aber ich schlage vor, Sie nicht dies tun, wenn Sie sicher, dass Benutzer nicht eine große Anzahl von komplexen Bilddateien löschen.