ここで、以下のコードの問題は、40 個の大きな画像のサムネイルを表示したい場合です。フルサイズ(約9000 Kb)のイメージをロードしているため、CPU使用率が増加するとWindowsのFirefoxがクラッシュします.html5でフルサイズをロードするのではなく、サムネイルを表示する方法はありますか. ..
dropbox.addEventListener("ドロップ", 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(ファイル,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();
}