Question

我在这里发现了一个非常好的代码，可以将图像预加载到应用程序中。哪个效果很好。

// PRELOAD IMAGES
var  images = {};
function loadImages(sources, callback) {

  var loadedImages = 0;
  var numImages = 0;
  // get num of sources
  for(var src in sources) {
    numImages++;
  }
  for(var src in sources) {
    images[src] = new Image();
    images[src].onload = function() {
      if(++loadedImages >= numImages) {
        callback(images);
      }
    };
    images[src].src = sources[src];
  }
}


var sources;
sources = {

  img1: "....../img1.png",
  img2: "....../img2.png",

};

当loadImages（）调用它时效果很好。

loadImages(sources, function(images) {
    ctxLogo.drawImage(images.img1, 0, 0, 10, 10);

  });

但是当我尝试从for循环中的if语句调用loadImages（）时，无论出于何种原因，都不调用该函数。我从数组中提取图像名称。其他所有工作都是有意的，即迭代，条件等。代码如下：

 loadImages(sources, function (images) {
 for (var j = 0; j < data.length; j++) {

  if (data[j].FlImg === 'img2') {

    alert (j) // just to be sure it gets here, it does.



      alert(j +'-this line is not')

      ctxGameBoard.drawImage(images.img2, 0, 0, 100, 100);
}
});

我在本地运行它。任何建议都非常感谢。

解决。我的问题是if块中没有声明对象变量。一旦我将代码更改为在loadImages函数内运行循环和条件。一切都按预期工作。谢谢你指出来。

Answer 1

您在第二个images循环中正在像对象一样访问for/in：

images[src] = new Image();

但是你还没有声明变量。您可以在DevTools中找到 ReferenceError 。

Answer 2

首先，您可以使用此代码来获取数量的来源：

var numImages = sources.length;

其次，您的对象变量'images'未定义;

第三，你的numImages已经比loadingImages好，所以if语句只会在thta是最后一次时被调用。

Answer 3

解决。我的问题是if块中没有声明对象变量。一旦我将代码更改为在loadImages函数内运行循环和条件。一切都按预期工作。谢谢你指出来。

Javascript if语句，函数未被调用

3 个答案: