I am having memory/garbage collection issues with Chrome
I am working on a photo uploading site which allows my client to drag and drop photos to upload using HTML5 and file API, so this wont work in IE. it only works in Chrome and FF. I haven't tested in Safari, Opera yet.
I am not using any JS frameworks and my example is less than 80 lines of code, so it's really easy to follow.
Here is my example: http://seesquaredphoto.com/testPreview.html
If you drag and drop a handful of JPG photos (4-5MB each) into the box you will see the previews load and in windows task manager, you can see the memory usage climb for that window. If you click the "Clear Images" button, the images are deleted.
If you do this in FF, after a few seconds, the memory returns to back what it was before you previewed the images. However in chrome, the memory does not drop.
Any ideas? Am i doing something wrong or is this a chrome bug?
Thanks. Here is the code if you dont want to view source the link above:
Javascript:
var upload = {
uploadFiles : function(event) {
var files = event.dataTransfer.files;
event.stopPropagation();
event.preventDefault();
var imageType = /image.*/;
for (var x = 0; x < files.length; x++) {
var file = files.item(x);
if (!file.type.match(imageType) || file.fileName.toUpperCase().indexOf(".JPG")!=file.fileName.length-4) {
continue;
}
var s = document.createElement("span");
s.className = "imgS";
var img = document.createElement("img");
img.className = "preview";
img.src = "";
s.appendChild(img);
document.getElementById("DDCont").appendChild(s);
loadPreview(img,file);
}
}
};
function loadPreview(img,file){
var reader = new FileReader();
reader.onload = function(e) {
img.src = e.target.result;
}
reader.readAsDataURL(file)
}
function init(){
var container = document.getElementById('DDCont');
container.addEventListener("dragenter", function(event) {
event.stopPropagation();
event.preventDefault();
},
false
);
container.addEventListener("dragover", function(event) {
event.stopPropagation();
event.preventDefault();
},
false
);
container.addEventListener("dragleave", function(event) {
event.stopPropagation();
event.preventDefault();
},
false
);
container.addEventListener("drop", upload.uploadFiles, false);
}
function clearImages(){
cont = document.getElementById("DDCont");
while(cont.childNodes.length>0) {
cont.removeChild(cont.childNodes[0]);
}
}
HTML:
<div id="DDCont" style="width:800px; height:600px; border:3px solid #333333; overflow:auto;"></div>
<input type="button" value="Clear Images" onclick="clearImages()"/>
