0 

    function LoadResources(){   
      alert("In load socket");

    var canvas   = document.getElementById("myCanvas");
    var context  = canvas.getContext("2d");
    var tiles= new Array();

    var loadedCount=0;
    for (x = 101; x <= 155; x++) {
      var imageObj = new Image(); // new instance for each image
      imageObj.src = "Resources/ClassicCardImages/deck1/dood_deck/"+x+".GIF";

      imageObj.onload=function(){
        loadedCount++;
        if(loadedCount==55){
            cardsImagesLoaded();
        }else {
          alert(loadedCount);
        }
      };
      tiles.push(imageObj);

     }
  };

因此，当我调用函数 LoadResources() 时，它确实会在“加载套接字中”发出警报，但在 imageObj.onload 函数中不会发出警报。

在 html 文档正文中使用时，您可以使用 window.onload 函数，即“window.onload = function() {..}”和我的函数。

另外，我在 Google chrome 上运行它。chrome 的 onload 是否有问题。

4

2 回答 2

1

即使该onload函数仅被调用一次（在图像已完全加载的那一刻），您也试图增加加载计数器，因此无法多次触发警报。对我来说，你想做什么并不是很明显。无论如何，如果您想使用onload函数加载多个图像，最佳实践是使用闭包，否则在每次迭代时，可能会在循环结束时仅加载最后一个图像。我不会详细介绍什么是闭包，但原理是这样的：

for (var i = 0; i< 4; i++) {
    var imgObj = new Image();
    imgObj.onload = (function(img) {

        return function () {
            ctx.drawImage(imgObj, 0, 0);
        }
    })(i);

    imgObj.src = 'image.png';
}

这样，通过调用一个新函数，您将创建一个新的执行上下文，保留i每次迭代的值。

于 2012-08-02T07:05:34.447 回答
0

我只是为您的代码添加一点帮助。

要按照您的方式分配功能，按照以下方式进行操作会更便宜。

 for (x = 101; x <= 155; x++) {
      var imageObj = new Image(); // new instance for each image
      imageObj.src = "Resources/ClassicCardImages/deck1/dood_deck/"+x+".GIF";

      imageObj.onload= imageOnLoad;
     }
function imageOnLoad(){
        loadedCount++;
        if(loadedCount==55){
            cardsImagesLoaded();
        }else {
          alert(loadedCount);
        }
      };
      tiles.push(imageObj);
}
于 2012-08-02T02:37:30.023 回答