Fine Uploader session Thumbnails slow to load

Question

I'm creating a mockup file upload tool for a community site using Fine Uploader.

I've got the session set up to retrieve the initial files from the server along with a thumbnail url.

It all works great, however the rendering of the thumbnails is really slow. I can't work out why. So I hard-coded to use a very small thumbnail for each of the four files. This made no difference.

The server side not the issue. The information is coming back very quickly.

Am I doing something wrong? Why is fineuploader so slow? Here's screen grab. It's taking four seconds to render the four thumbnails.

I'm using latest chrome. It's a NancyFX project on a fairly powerful machine. Rending other pages with big images on them is snappy.

Client side 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

This is by design, and was implemented both to prevent the UI thread from being flooded with the image scaling logic and to prevent a memory leak issue specific to Chrome. This is explained in the thumbnails and previews section of the documentation, specifically in the "performance considerations" area:

For browsers that support client-generated image previews (qq.supportedFeatures.imagePreviews === true), a configurable pause between template-generated previews is in effect. This is to prevent the complex process of generating previews from overwhelming the client machine's CPU for a lengthy amount of time. Without this limit in place, the browser's UI thread runs the risk of blocking, preventing any user interaction (scrolling, etc) until all previews have been generated.

You can adjust or remove this pause via the thumbnails option, but I suggest you not do this unless you are sure users will not drop a large number of complex image files.