在jquery准备好之后画在画布上

Question

我刚开始使用HTML5 canvas标签和javascript开发一些小游戏。但是当我开始时，我发现当我像这样调用jquery ready处理程序时：

<script>$(function(){ game.init(); })</script>

然后我尝试绘制一个图像（预先存在于我的标记中），如下所示：

var spaceshipImg = $('#imgSpaceship')[0];
game.context.drawImage(spaceshipImg, 0, 350);

它不会工作，好像img尚未加载。但是，如果我调用同样的方法在我的body标签中放置一个'onload'，那么它确实有效。根据jQuery文档，此时应加载所有图像，对吧？

Answer 1

jQuery有两种不同的方法用于等待加载所有内容：ready和load方法。使用ready语法时使用$(function() {})方法。此方法不会等待加载所有图像（请参阅documentation）。为此，您想使用load方法。您的代码将变为：

<script>
  $(window).load(function () {
    game.init();
  });
</script>

现在只有在加载了所有资源（包括图像）后才会调用init方法。