Progress事件侦听器一次加载一个缩略图

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