2

コード内のイベント リスナーとイメージ ローダーに問題がありました。イベントリスナーに基づいて読み込まれた画像を読み込んでステータスを確認しようとすると、一部の画像がスキップされました。ブラウザが処理できるイベントは 1 つだけで、アクティブなイベントが停止していない場合は、次に動作してその作業をスキップできると思います。そのため、wront ステータスを返し、使用できるイメージはほとんどありません。これについていくつかアドバイスをください。これが私のコードです：

//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);
    };

};
4

2 に答える 2

0

少なくともここで問題があります：

imageData.push(new imageInfo(images[iCount], images[iCount].width/images[iCount].height, images[iCount].width, images[iCount].height));

loadブラウザによって画像が読み込まれると、イベントが発生します。ただし、ロード開始と同じ順序で起動する必要はありません。基本的に、前にimages[2]ロードすることができ、その場合、iCountは機能しません。images[0]images[1]

この場合thisのように代わりに使用することができ、loadイベントを発生させたその画像を正確に指し示します。images[iCount]this

imageData.push(new imageInfo(this, this.width/this.height, this.width, this.height));

ブラウザは1つのイベントしか処理できず、アクティブなイベントが停止されていない場合、次に機能してその機能をスキップできると思います。

いいえ。それは間違いです。定期的にすべてのイベントが発生します。ただし、JSはシングルスレッドであるため、イベントをキューに入れるだけで、前のイベントが完了した後に次のイベントを実行します。イベントをスキップしません。

于 2012-11-13T11:46:55.913 に答える
0

これは、IE6 を含むすべてのブラウザーで機能するはずです。

var list = [
      'images/ground_02.png',
      'images/ground_layer0.png'
    ],
    images = {};

function loadImage() {
  images[this.src] = {
    loaded: (this.width > 0 ? true : false),
    src: this.src,
    width: this.width,
    height: this.height
  };

  if (list.length < 1) return;

  var url = list.pop(),
      img = new Image();

  img.onload = loadImage;
  img.onerror = loadImage;
  img.src = url;
}

loadImage(); // Initialize loading

画像が読み込まれたかどうかを確認する必要がある場合は、次のようにします。

function isImageLoaded(src) {
  return (images[src] && images[src].loaded);
}

if (isImageLoaded('images/ground_02.png')) alert('Yes!');
于 2012-11-13T11:40:19.477 に答える