将本地映像加载到浏览器时出现性能问题

Question

我正在使用FileReader在Backbone应用程序中显示本地图像.较小的图像立即显示没有任何问题,但当图像是几兆字节或更大时,Chrome需要2或3秒才能加载图像(在具有8 GB RAM的全新MacBook Pro上).

正如评论中指出的那样,大型图像会在此File API教程中即时加载,因此问题不FileReader在于我在Backbone中的特定实现.

我已经包含了相关的Backbone模型并在下面查看.这是逻辑的概述:

1. 该模型创建一个新FileReader文件路径传递到的新文件.
2. 一旦文件被加载,一个Image被创建和src的Image被设置为通过所提供的数据的URL FileReader.
3. 加载图像后,将使用图像的宽度和高度更新模型(在应用程序的其他位置使用)initialized,并将模型的属性设置为true(从而change在模型上触发事件).
4. 当视图change在模型上检测到事件时,将render调用该函数,该函数将a的背景图像替换div为数据URL.

骨干模型

var PhotoModel = Backbone.Model.extend({

  initialize: function() {
    this.set({"available": true});
    this.initialized = false;
    if (this.get("file")) { 
      this.uploadPhoto();
    }
  },

  uploadPhoto: function() {
    var file = this.get("file");
    var reader = new FileReader();
    var model = this;
    reader.onload = function(event) {
      var image = new Image();
      image.onload = function() {
        model.set({width: this.width, height: this.height});
        model.set("initialized", true);
      };
      image.src = event.target.result; 
      model.set("dataURL", event.target.result);
    }
    reader.readAsDataURL(file);
  },
});

骨干视图

var PhotoFormView = Backbone.View.extend({

  className: "photo-form",

  initialize: function() {
    this.listenTo(this.model, "change", this.render);
    this.render();
  },

  render: function() {
    $(this.el).find(".photo").css({"background-image": "url(" + this.model.get("dataURL") + ")"});
  },
});

以下是Chrome时间轴的屏幕截图.数据URL请求和加载事件之间似乎发生了最大的延迟(这约占0.5秒).我不确定"重新计算风格"究竟是什么.我也不确定为什么会有这么多的绘制事件(它似乎在滚动条区域呈现).

解

我曾假设浏览器能够比任何JavaScript解决方案更有效地本地调整图像大小,但这种假设是错误的.通过在显示图像之前调整图像大小,我能够将延迟减少到大约50毫秒.我使用了一个名为JavaScript Load Image的开源插件来处理图像加载和调整大小(它使用HTML5 canvas标记).这是我修改过的Backbone模型:

var PhotoModel = Backbone.Model.extend({

  initialize: function() {
    this.set({available: true});
    this.set({initialized: false});
    if (this.get("file")) { 
      this.uploadPhoto();
    }
  },

  uploadPhoto: function() {
    var model = this;
    loadImage(this.get("file"), function (img) {
      model.set({img: img});
      model.set({initialized: true});
    }, {maxHeight: 344});
  },
});

Answer 1

使用FileReader加载大图像时遇到了同样的问题.如果您不打算以全尺寸显示它们,似乎解决方法涉及在使用canvas元素显示图像之前缩放图像.

在我自己实现混合成功后,我选择使用JavaScript Load Image(MIT许可证)及其maxWidth选项,它解决了这个问题以及更多(不可预见的)问题.

试试这个演示,看看你的图像是否加载得很好.