进度事件监听器一次加载一个缩略图

Question

我正在处理大约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);
}

Answer 1

您可以将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));