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