1

下面代码中的问题是，当我想显示 40 个大图像的缩略图时。Windows 中的 Firefox 正在崩溃，因为 cpu 使用率增加，同时加载一个又一个图像。我知道这是因为加载全尺寸的图像（大约 9000 Kb）。有没有办法只显示缩略图而不是在 html5 中加载全尺寸。 ..

dropbox.addEventListener("drop", dropUpload, false);

函数dropUpload（事件）{

noop（事件）；var dropMethod = event.dataTransfer;

var classicMethod = event.target;

var filesDone =0;

var dropedFiles = (dropMethod == undefined) ? classicMethod.files: dropMethod.files;
function next() {
    if (filesDone < dropedFiles.length) {
        addFileThumbnails(dropedFiles[filesDone++], next);
    }
}
// do the first one
next();

}

函数 addFileThumbnails(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

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) {
        return function (evt) {
            img.src = evt.target.result;
            doneCallback();
    };

    }(img));
    var ret = reader.readAsDataURL(file);
    var canvas = document.createElement("canvas");
    ctx = canvas.getContext("2d");
    img.onload= function(){
      ctx.drawImage(img,100,100)
    }
}

reader.addEventListener("progress", function (evt) {
    if (evt.lengthComputable) {
        progressBar.style.width= (evt.loaded / evt.total) * 100 + "%";
    }

}, false);

// File uploaded
reader.addEventListener("load", function () {
    progressBarContainer.className += " uploaded";
    progressBar.innerHTML = "";
}, false);

fileInfo = "Name:" + file.name + "</br>";
fileInfo += "Size:" + parseInt(file.size / 1024, 10) + " kb</br>";
fileInfo += "Type:" + file.type;
div.setAttribute("id", "desc_" + img.id.substring(4));
div.innerHTML = fileInfo;


tBody = getTableBodyLayout(img,li);
document.getElementById("images_table").appendChild(tBody);
moveScrollbar();

}

4

0 回答 0