I'm using FileReader to display local images in a Backbone application. Smaller images are displayed immediately without any issues, but when the images are several megabytes or larger, it takes Chrome 2 or 3 seconds to load the image (on a brand new MacBook Pro with 8 GB RAM).
As pointed out in the comments, large images load instantaneously in this File API tutorial , so the issue is not with FileReader
but rather with my particular implementation in Backbone.
I've included the relevant Backbone model and view below. Here's an outline of the logic:
FileReader
into which the file path is passed. Image
is created and the src
of the Image
is set to the data URL provided by the FileReader
. initialized
attribute of the model is set to true
(thus firing a change
event on the model). change
event on the model, the render
function is called, which replaces the background image of a div
with the data URL. Backbone Model
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);
},
});
Backbone View
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") + ")"});
},
});
Below is a screenshot of the Chrome timeline. The largest delay seems to happen between the data URL request and the load event (this accounts for approximately 0.5 seconds). I'm not sure what "Recalculate style" is all about. I'm also not sure why there are so many paint events (it appears to be rendering in the scrollbar area).
SOLUTION
I had assumed that the browser would be able to natively resize images more efficiently than any JavaScript solution, but this assumption was wrong . By resizing the images before they are displayed, I was able to reduce the delay to about 50 milliseconds . I used an open source plugin called JavaScript Load Image to handle the image loading and resizing (it uses the HTML5 canvas
tag). Here's my modified Backbone model:
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});
},
});
I was encountering the same problem when loading large images using FileReader. If you're not planning on displaying them at full size, it seems the workaround involves scaling the image before displaying it using a canvas
element.
After mixed success with my own implementation, I opted to use JavaScript Load Image (MIT license) and its maxWidth
option, which solved this and more (unforseen) problems.
Try the the demo and see if your images load nicely.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.