我使用html5 filereader API在本地获取照片,而无需用户上传照片。
在支持它的浏览器中,我允许多个选择,因此我循环选定的文件并在每个文件上执行一个函数(TC.editor.renderSlide()),如下所示:
handlePhotoUploads: function(event) {
var self = this;
TC.dialog.destroy();
var files = event.target.files;
var count = files.length + TC.editor.cache.slides.length;
for (var i = 0, f; f = files[i]; i++) {
if (!f.type.match('image.*')) {
continue;
}
var reader = new FileReader();
var index = TC.editor.getNewSlidesIndex();
TC.editor.addNewSlide('photo', index);
reader.onload = (function(theFile) {
var slideindex = index;
return function(e) {
TC.editor.renderSlide(slideindex, e.target.result, 'internal', count);
};
})(f);
reader.readAsDataURL(f);
}
},问题在于,TC.editor.renderSlide()函数可能需要大量时间来执行(执行画布和DOM操作),所以当处理8个左右的大图像文件时,浏览器会被锁定很长时间。即使是'处理gif'也会在这段时间内停止动画。
有什么方法可以确保每个reader.onload事件只有在前一个完成后才会触发?通过这种方式,用户可以单独查看每个对TC.editor.renderSlide()的调用结果,而不是锁定浏览器而处理所有内容的当前情况,从而定期获得进度更新?
我曾尝试添加一个简单的setTimeout renderSlide()无济于事?
任何帮助或想法将不胜感激。