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

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