我的代码中的事件监听器和图像加载器有问题。当我尝试基于事件侦听器加载并检查已加载图像的状态时,跳过了一些图像。我认为浏览器只能处理一个事件,当活动事件未被停止时,下一个可以工作并跳过其工作。因此,很少有图像可以返回警告状态并可以使用。请给我一些建议。这是我的代码:
//Image loader
var urlList = [
'images/ground_02.png', // 0 - FG
'images/ground_layer0.png', // 1 - CITY
...
];
var urlListLength = urlList.length; //length of URL-array
var iCount = new Number(0); // Create zero-counter
var images = new Array(); // All images array. Each elem stores one image
var imageInfo = function(imageName, imageCount, imageWidth, imageHeight) { // Constructor for image data container
this.imageName = imageName; // Url of image
this.imageCount = imageCount; // Frames
this.imageWidth = imageWidth; // Width of images
this.imageHeight = imageHeight; // Height of images
};
var imageData = new Array(); // Images data array
for (var i=0; i!=urlListLength; ++i) { // Loop for each image load
images[i] = new Image(); // Image array.
images[i].addEventListener('load', function(i) {
imageData.push(new imageInfo(images[iCount], images[iCount].width/images[iCount].height, images[iCount].width, images[iCount].height));
iCount++;
if (iCount == urlListLength) {
var loaded = true;
loop();
};
}, false);
images[i].src = urlList[i];
images[i].onerror=function() {
alert("FAIL "+this.src);
};
};
最佳答案
至少在这里您有问题:
imageData.push(new imageInfo(images[iCount], images[iCount].width/images[iCount].height, images[iCount].width, images[iCount].height));
一旦浏览器加载了图像,就会触发
load
事件。但是,不必按加载开始的顺序将其触发。基本上,images[2]
可以在images[0]
和images[1]
之前加载,在这种情况下,iCount将不起作用。您可以使用
this
而不是images[iCount]
,因为在这种情况下,this
将指向已触发加载事件的图像。imageData.push(new imageInfo(this, this.width/this.height, this.width, this.height));
我认为浏览器只能处理一个事件,而活动的则不能
接下来停止可以工作并跳过其工作。
不。那是错的。定期将触发所有事件。但是JS是单线程的,因此它将简单地将一个事件放入队列,并在上一个操作完成后运行下一个事件。它不会跳过任何事件。