Javascript 图像，onload 事件在 chrome 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5820209/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
image,onload event not working in chrome
提问by Early73
I'm using html5 to create drag and drop image upload functionality. This works great for me in firefox but in chrome the image onload event only fires the first time. If I drag multiple images in only the first works and if I drag a second in it fails. I believe the problem is with the image onload.
我正在使用 html5 创建拖放图像上传功能。这在 Firefox 中对我很有用，但在 chrome 中，图像 onload 事件仅在第一次触发。如果我只在第一个作品中拖动多个图像，如果我在其中拖动第二个图像失败。我相信问题出在图像加载上。
here is the way my code works I have removed the irrelevant sections:
这是我的代码的工作方式，我删除了不相关的部分：
var img = document.createElement("img");
var reader = new FileReader();
var canvas = document.createElement("canvas");
var canvasData;
var ctx = canvas.getContext("2d");
var myFiles;
var i = 0;
reader.onload = (function (aImg)
{
return function (e)
{
aImg.src = e.target.result;
};
})(img);
img.onload = function (){
//resizes image
//draws it to the canvas
//posts to server
i++;
if(i < myFiles.length){
processNext(i);
}
}
function processNext(filei) {
var file = myFiles[filei];
img.file = file;
reader.readAsDataURL(file);
}
i = 0;
myFiles = files;
processNext(0);
Does anyone know why this works in firefox but not chrome?
有谁知道为什么这在 Firefox 中有效但在 chrome 中无效？
采纳答案by Harut
Explanation from chromium tracker:
铬跟踪器的解释：
This is not a bug. WebKit is just more strict. You must instantiate a new Image() object before the replacement, like this:
这不是一个错误。WebKit 只是更严格。您必须在替换之前实例化一个新的 Image() 对象，如下所示：
var photo = document.getElementById('image_id');
var img = new Image();
img.addEventListener('load', myFunction, false);
img.src = 'http://newimgsource.jpg';
photo.src = img.src;
source: http://code.google.com/p/chromium/issues/detail?id=7731#c12
来源：http: //code.google.com/p/chromium/issues/detail?id=7731#c12
回答by Julian
This is strange, none of the above worked for me. I was defining the image variable as local and change it to global and it started working. Does this make sense? Can somebody explain it?
这很奇怪，以上都不适合我。我将图像变量定义为本地并将其更改为全局并开始工作。这有意义吗？有人可以解释一下吗？
This didnt worked for me:
这对我不起作用：
function loadImage() {
var ImageToLoad = new Image();
imageToLoad.onload = function() {
console.log("finish loading");
};
imageToLoad.src = "myimage.png";
}
This did work:
这确实有效：
var ImageToLoad = new Image();
function loadImage() {
imageToLoad.onload = function() {
console.log("finish loading");
};
imageToLoad.src = "myimage.png";
}
