javascript - プログレス イベント リスナーがサムネイルを 1 つずつロードする

Question

それぞれサイズが 9000KB の約 40 個の大きな画像に取り組んでいます。以下のコードがあり、すべての画像が一度に読み込まれ、画面がフリーズします。最初の画像が正常に進行し、完全に読み込まれ、次の画像に移動するまでコントロールを待機させたい.

//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()、一度に1つずつ開始するように変更できます。

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