HTML5，Javascript 画布标签 image.onload() 问题

Question

    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() {..}”和我的函数。

另外我在谷歌浏览器上运行它。Chrome的onload有问题吗？

Answer 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 的值。

Answer 2

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

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

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