javascript - 等待添加到 CSS 的图像加载 - JQuery

Question

我有一张图片，我想在上面画画。为此，我使用 jQuery 来隐藏图像:

$("img").hide();

然后我创建一个 Canvas 并将它放在同一个 div 中，在 html 中具有 id drawing。然后我将 Canvas 的背景设置为与我隐藏的图像的 img src 相同。这使它看起来像一个图像，但现在它实际上是一个以图像为背景的 Canvas 。我通过以下方式做到这一点:

$('#drawing > canvas').css('background-image','url('+$(".image img").attr('src')+')');
context.canvas.width = $("img").width();
context.canvas.height = $("img").height();

我遇到的问题是，有时图像不会显示在 Canvas 中，并且 Canvas 不是图像的大小。我认为这可能是因为一些加载问题。我如何才能等待 Canvas 确定在背景中显示图像？谢谢

编辑:请注意，在 DOM 中， Canvas 始终具有正确的 src。它只是不显示它

编辑 2:这是 JSfiddle。在这里，一切似乎都很好，但我的代码中还有很多事情要做，包括从服务器获取内容，因此速度较慢。希望这可以帮助你们理解问题:http://jsfiddle.net/wL3ezLke/2/ 再次感谢

Answer 1

你需要使用:

$(function(){
  // Code executed once the DOM is loaded.
});

官方文档: https://api.jquery.com/ready/