jquery准备好后在画布上绘图答案

【问题标题】：drawing on canvas after jquery readyjquery准备好后在画布上绘图
【发布时间】：2013-05-19 17:23:25
【问题描述】：

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

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

然后我尝试像这样绘制一个图像（预先存在于我的标记中）：

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

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

【问题讨论】：

【解决方案1】：

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

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

现在init 方法仅在所有资源（包括图像）已加载时才被调用。

【讨论】：