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

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));