仅在图像加载时继续 for 循环
Continuing for loop only when image loads
function readXML(){
var xmlDoc = loadXML();
var x = xmlDoc.getElementsByTagName("image");
for (i = 0; i < x.length; i++) {
if (i == 600){
break;
}
var path = x[i].getElementsByTagName("path")[0].childNodes[0].nodeValue;
var title = x[i].getAttribute("class");
this.imageArray.push(new InfoImage(path,title));
while(this.imageArray[i].isImageLoaded() == false); //something like this
console.log(this.imageArray[i].getMaxPixels());
}
}
function InfoImage(path,title){
this.path = path;
this.title = title;
this.color = undefined;
this.maxPixels = undefined;
this.imageLoaded = false;
this.init = function(){
var canvas = document.querySelector("canvas");
var img_Color = new Image_Processing_Color(canvas);
var img = new Image();
var info_image = this;
img.onload = function () {
img_Color.init(img);
info_image.color = img_Color.getDominantColor();
info_image.maxPixels = img_Color.getDominantColorPixels();
info_image.imageLoaded = true;
};
img.src = path;
};
this.isImageLoaded = function(){
return this.imageLoaded;
}
this.getPath = function(){
return this.path;
};
this.getTitle = function(){
return this.title;
};
this.getColor = function(){
return this.color;
};
this.getMaxPixels = function(){
return this.maxPixels;
};
this.init();
}
我希望我的 for
循环仅在 img.onLoad 完成时继续下一次迭代。我正在使用的 while
会阻止代码并且不会让 img.onLoad 完成。有没有办法做到这一点?不改变代码结构。
您可以检查 img 的 .complete 属性:
var x = document.getElementById("myImg").complete;
结果可以是真或假
如果我对你的理解正确,我相信你最好的选择是使用 async.parallel(如果你希望它是串行的,他们有一个函数 - 系列)。
此函数可以为您执行一系列任务并在完成时发出回调(您会收到错误通知)。
function readXML(){
var xmlDoc = loadXML();
var x = xmlDoc.getElementsByTagName("image");
for (i = 0; i < x.length; i++) {
if (i == 600){
break;
}
var path = x[i].getElementsByTagName("path")[0].childNodes[0].nodeValue;
var title = x[i].getAttribute("class");
this.imageArray.push(new InfoImage(path,title));
while(this.imageArray[i].isImageLoaded() == false); //something like this
console.log(this.imageArray[i].getMaxPixels());
}
}
function InfoImage(path,title){
this.path = path;
this.title = title;
this.color = undefined;
this.maxPixels = undefined;
this.imageLoaded = false;
this.init = function(){
var canvas = document.querySelector("canvas");
var img_Color = new Image_Processing_Color(canvas);
var img = new Image();
var info_image = this;
img.onload = function () {
img_Color.init(img);
info_image.color = img_Color.getDominantColor();
info_image.maxPixels = img_Color.getDominantColorPixels();
info_image.imageLoaded = true;
};
img.src = path;
};
this.isImageLoaded = function(){
return this.imageLoaded;
}
this.getPath = function(){
return this.path;
};
this.getTitle = function(){
return this.title;
};
this.getColor = function(){
return this.color;
};
this.getMaxPixels = function(){
return this.maxPixels;
};
this.init();
}
我希望我的 for
循环仅在 img.onLoad 完成时继续下一次迭代。我正在使用的 while
会阻止代码并且不会让 img.onLoad 完成。有没有办法做到这一点?不改变代码结构。
您可以检查 img 的 .complete 属性:
var x = document.getElementById("myImg").complete; 结果可以是真或假
如果我对你的理解正确,我相信你最好的选择是使用 async.parallel(如果你希望它是串行的,他们有一个函数 - 系列)。
此函数可以为您执行一系列任务并在完成时发出回调(您会收到错误通知)。