我的代码中的事件监听器和图像加载器有问题。当我尝试基于事件侦听器加载并检查已加载图像的状态时,跳过了一些图像。我认为浏览器只能处理一个事件,当活动事件未被停止时,下一个可以工作并跳过其工作。因此,很少有图像可以返回警告状态并可以使用。请给我一些建议。这是我的代码:

//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是单线程的,因此它将简单地将一个事件放入队列,并在上一个操作完成后运行下一个事件。它不会跳过任何事件。

09-10 10:44
查看更多