进度事件监听器一次加载一个缩略图
Progress event listeners to load thumbnails one at a time
我正在处理大约40张大小为9000KB的大型图像。我有下面的代码,所有的图像加载在一个时间,使我的屏幕冻结,我想我的控制将等到第一个图像是成功的进展,然后完全加载,然后移动到下一个。任何建议都有帮助。
//dropping around 40 images
dropbox.addEventListener("drop", dropUpload, false);
function dropUpload(event) {
noop(event);
var dropMethod = event.dataTransfer;
var classicMethod = event.target;
var dropedFiles = (dropMethod == undefined) ? classicMethod.files: dropMethod.files;
for ( var i = 0; i < dropedFiles.length; i++) {
addFilesToUpload(dropedFiles[i]);
}
}
function addFilesToUpload(file) {
var li = document.createElement("li"), div = document.createElement("div"), img, progressBarContainer = document
.createElement("div"), progressBar = document.createElement("div"), tBody;
li.appendChild(div);
progressBarContainer.className = "progress-bar-container";
progressBar.className = "progress-bar";
progressBar.setAttribute("id", "proBar_" + (indexN++));
progressBarContainer.appendChild(progressBar);
li.appendChild(progressBarContainer);
var reader = new FileReader();
reader.onerror = function(event) {
alert("couldn't read file " + event.target.error.code);
};
// Present file info and append it to the list of files
fileInfo = "<div><strong>Name:</strong> " + file.name + "</div>";
fileInfo += "<div><strong>Size:</strong> " + parseInt(file.size / 1024, 10)
+ " kb</div>";
fileInfo += "<div><strong>Type:</strong> " + file.type + "</div>";
div.innerHTML = fileInfo;
if (reader !== "undefined" && (/image/i).test(file.type)) {
img = document.createElement("img");
img.setAttribute("class", "thumb");
img.setAttribute("id", "img_" + (indexN++));
reader.onload = (function(img, li) {
return function(evt) {
img.src = evt.target.result;
img.file = file;
};
}(img, li));
reader.readAsDataURL(file);
}
reader.addEventListener("progress", function(evt) {
if (evt.lengthComputable) {
progressBar.style.width = (evt.loaded / evt.total) * 100 + "%";
}
}, false);
reader.addEventListener("load", function() {
progressBarContainer.className += " uploaded";
progressBar.innerHTML = "";
}, false);
tBody = getTableBodyLayout(img, li);
document.getElementById("images_table").appendChild(tBody);
}
您可以将addFilesToUpload()
更改为在文件完成时接受回调,并将dropUpload()
更改为每次初始化一个。
function dropUpload(event) {
noop(event);
var dropMethod = event.dataTransfer;
var classicMethod = event.target;
var dropedFiles = (dropMethod == undefined) ? classicMethod.files: dropMethod.files;
var filesDone = 0;
// local function to process the next file
function next() {
if (filesDone < dropedFiles.length) {
addFilesToUpload(dropedFiles[filesDone++], next);
}
}
// do the first one
next();
}
function addFilesToUpload(file, doneCallback) {
var li = document.createElement("li"), div = document.createElement("div"), img, progressBarContainer = document
.createElement("div"), progressBar = document.createElement("div"), tBody;
li.appendChild(div);
progressBarContainer.className = "progress-bar-container";
progressBar.className = "progress-bar";
progressBar.setAttribute("id", "proBar_" + (indexN++));
progressBarContainer.appendChild(progressBar);
li.appendChild(progressBarContainer);
var reader = new FileReader();
reader.onerror = function(event) {
alert("couldn't read file " + event.target.error.code);
};
// Present file info and append it to the list of files
fileInfo = "<div><strong>Name:</strong> " + file.name + "</div>";
fileInfo += "<div><strong>Size:</strong> " + parseInt(file.size / 1024, 10)
+ " kb</div>";
fileInfo += "<div><strong>Type:</strong> " + file.type + "</div>";
div.innerHTML = fileInfo;
if (reader !== "undefined" && (/image/i).test(file.type)) {
img = document.createElement("img");
img.setAttribute("class", "thumb");
img.setAttribute("id", "img_" + (indexN++));
reader.onload = (function(img, li) {
return function(evt) {
img.src = evt.target.result;
img.file = file;
// call the callback to tell the caller that this file is done now
doneCallback();
};
}(img, li));
reader.readAsDataURL(file);
}
reader.addEventListener("progress", function(evt) {
if (evt.lengthComputable) {
progressBar.style.width = (evt.loaded / evt.total) * 100 + "%";
}
}, false);
reader.addEventListener("load", function() {
progressBarContainer.className += " uploaded";
progressBar.innerHTML = "";
}, false);
tBody = getTableBodyLayout(img, li);
document.getElementById("images_table").appendChild(tBody);
}
如果你想等待进入下一个图像,直到每个图像已经加载,那么你可以改变reader.onload
处理程序为:
reader.onload = (function(img, li) {
return function(evt) {
img.onload = function() {
// call the callback to tell the caller that this file is done now
doneCallback();
};
img.src = evt.target.result;
img.file = file;
};
}(img, li));
相关文章:
- 当页面包含指向一个图像的多个链接时,fancyBox会复制缩略图辅助图像
- 为缩略图库和较大图像库添加下一个和上一个按钮
- 图像缩略图库中的“下一个”和“上一个”按钮中的“问题”
- 显示带有缩略图和下一个/上一个按钮的图像
- 我需要一个带有垂直缩略图和文本的 jquery 滑块
- 带有缩略图的轮播,在轮播旋转时将类添加到下一个 LI
- 当用户点击facebook共享缩略图时,我可以加载一个iframe吗
- 好的,所以我试图弄清楚如何将文本添加到缩略图中(我在下面是一个完整的新手代码)
- 如何将“;“大”;图像和“;“小”;图像到一个文件夹-Caroufredsel缩略图
- 如何制作一个缩略图页面,链接到皇家滑块画廊中的图像
- 我如何使我的缩略图作为一个链接和标题追加到右边
- 只显示一个画廊的5张缩略图
- 如何在缩略图面板的下一个和上一个按钮的图像偏移,使用核心javascript
- 需要一个灯箱画廊,从图像文件夹调用,没有缩略图,并从一个按钮点击打开
- 褪色的9个缩略图在随机1在一个时间使用jquery画廊
- 单击下一个缩略图时删除内联样式
- Jquery -尝试创建一个图像库,在点击缩略图时滑入视图
- Javascript画廊与前/下一个函数和缩略图.什么都没有
- 我做了一个简单的jquery幻灯片——我想通过点击缩略图切换到一个特定的图像
- 如何编码一个脚本,可以扫描在我的网站的链接,并产生缩略图;就像Facebook一样