Introduce a priority queue to the image loader.

chrome/browser/resources/file_manager/js/media/media_util.js

 // Copyright (c) 2012 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 'use strict';
 
 /**
  * Loads a thumbnail using provided url. In CANVAS mode, loaded images
  * are attached as <canvas> element, while in IMAGE mode as <img>.
  * <canvas> renders faster than <img>, however has bigger memory overhead.
  *
  * @param {string} url File URL.
  * @param {ThumbnailLoader.LoaderType=} opt_loaderType Canvas or Image loader,
  *     default: IMAGE.
  * @param {Object=} opt_metadata Metadata object.
  * @param {string=} opt_mediaType Media type.
  * @param {ThumbnailLoader.UseEmbedded=} opt_useEmbedded If to use embedded
  *     jpeg thumbnail if available. Default: USE_EMBEDDED.
+ * @param {number=} opt_priority Priority, the highest is 0. default: 2.
  * @constructor
  */
-function ThumbnailLoader(
-    url, opt_loaderType, opt_metadata, opt_mediaType, opt_useEmbedded) {
+function ThumbnailLoader(url, opt_loaderType, opt_metadata, opt_mediaType,
+    opt_useEmbedded, opt_priority) {
   opt_useEmbedded = opt_useEmbedded || ThumbnailLoader.UseEmbedded.USE_EMBEDDED;
 
   this.mediaType_ = opt_mediaType || FileType.getMediaType(url);
   this.loaderType_ = opt_loaderType || ThumbnailLoader.LoaderType.IMAGE;
   this.metadata_ = opt_metadata;
+  this.priority_ = (opt_priority !== undefined) ? opt_priority : 2;
 
   if (!opt_metadata) {
     this.thumbnailUrl_ = url;  // Use the URL directly.
     return;
   }
 
   this.fallbackUrl_ = null;
   this.thumbnailUrl_ = null;
   if (opt_metadata.drive) {
     var apps = opt_metadata.drive.driveApps;
@@ skipping 110 matching lines @@
     this.attachImage(box, fillMode);
     if (opt_onSuccess)
       opt_onSuccess(this.image_, this.transform_);
   }.bind(this);
   this.image_.onerror = function() {
     if (opt_onError)
       opt_onError();
     if (this.fallbackUrl_) {
       new ThumbnailLoader(this.fallbackUrl_,
                           this.loaderType_,
-                          null,
-                          this.mediaType_).
+                          null,  // No metadata.
+                          this.mediaType_,
+                          undefined,  // Default value for use-embedded.
+                          this.priority_).
           load(box, fillMode, opt_onSuccess);
     } else {
       box.setAttribute('generic-thumbnail', this.mediaType_);
     }
   }.bind(this);
 
   if (this.image_.src) {
     console.warn('Thumbnail already loaded: ' + this.thumbnailUrl_);
     return;
   }
 
   // TODO(mtomasz): Smarter calculation of the requested size.
   var wasAttached = box.ownerDocument.contains(box);
   var modificationTime = this.metadata_ &&
                          this.metadata_.filesystem &&
                          this.metadata_.filesystem.modificationTime &&
                          this.metadata_.filesystem.modificationTime.getTime();
   this.taskId_ = util.loadImage(
       this.image_,
       this.thumbnailUrl_,
       { maxWidth: ThumbnailLoader.THUMBNAIL_MAX_WIDTH,
         maxHeight: ThumbnailLoader.THUMBNAIL_MAX_HEIGHT,
         cache: true,
+        priority: this.priority_,
         timestamp: modificationTime },
       function() {
         if (opt_optimizationMode ==
             ThumbnailLoader.OptimizationMode.DISCARD_DETACHED &&
             !box.ownerDocument.contains(box)) {
           // If the container is not attached, then invalidate the download.
           return false;
         }
         return true;
       });
@@ skipping 61 matching lines @@
   var modificationTime = this.metadata_ &&
                          this.metadata_.filesystem &&
                          this.metadata_.filesystem.modificationTime &&
                          this.metadata_.filesystem.modificationTime.getTime();
   this.taskId_ = util.loadImage(
       this.image_,
       this.thumbnailUrl_,
       { maxWidth: ThumbnailLoader.THUMBNAIL_MAX_WIDTH,
         maxHeight: ThumbnailLoader.THUMBNAIL_MAX_HEIGHT,
         cache: true,
+        priority: this.priority_,
         timestamp: modificationTime });
 };
 
 /**
  * Attach the image to a given element.
  * @param {Element} container Parent element.
  * @param {ThumbnailLoader.FillMode} fillMode Fill mode.
  */
 ThumbnailLoader.prototype.attachImage = function(container, fillMode) {
   if (!this.hasValidImage()) {
@@ skipping 105 matching lines @@
 
   function percent(fraction) {
     return (fraction * 100).toFixed(2) + '%';
   }
 
   img.style.width = percent(fractionX);
   img.style.height = percent(fractionY);
   img.style.left = percent((1 - fractionX) / 2);
   img.style.top = percent((1 - fractionY) / 2);
 };