進度事件監聽器一次加載一個縮略圖

Question

我正在處理大約40個大尺寸圖像，每個尺寸爲9000KB。 我有下面的代碼，所有圖像加載的時間，這使得我的屏幕凍結，我希望我的控件將等待，直到第一個圖像成功進展，然後完全加載，然後移動到下一個one.any想法是有幫助的。 。

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