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

我有一个图像，我想在上面画画。为此，我使用jQuery隐藏图像：

$("img").hide();

然后我创建了一个画布，将它放在同一个div中，并在html中绘制id。然后，我将画布的背景设置为与我隐藏的图像的imgsrc相同。这使它看起来像一个图像，但现在它实际上是一个画布，以图像为背景。我通过以下方式做到这一点：

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

我遇到的问题是，有时图像不显示在画布中，画布的大小与图像的大小不同。我想可能是因为装载问题。我怎样才能等到画布上的图像确实显示在背景中呢？多谢各位

编辑：请注意，在DOM中，画布始终具有正确的src。它只是没有显示出来

编辑2：这里是JSFIDLE。在这里，一切似乎都很好，但我的代码中还有很多工作要做，包括从服务器获取内容，因此速度较慢。希望这能帮助你们理解这个问题： 再次感谢

您需要使用：

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

正式文件：

---

如果我理解正确，您的问题是知道从您描述的内容加载图像的时间，但可能还有很多其他问题

要测试图像是否已加载，非常简单

 var $img = $('#hiddenImg');
 if ($img[0].complete) doCanvasStuff();
 else {
      $img.on('load', function(e) {
         var $canvas = $('#drawCanvas');
          $canvas.css({width: $img.width(), height: $img.height()});
          //you can go ahead with the background image, but this is preferable
          var ctx = $canvas[0].getContext("2d");     
          ctx.drawImage(img,0,0);
      }
  }

这应该确保画布仅在加载图像后才加载图像，或者在加载图像后立即进行画布填充，

更改

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

到

---

因此，在图像进入背景之前设置高度和宽度。

整个代码都在$document.readyfunction中调用的函数中{…我已经添加了它。很抱歉花了一段时间。$image img和$img将是类似于图像数组的对象。您必须获得一个src、宽度和高度。使用$selector.each方法，或者更具体地使用jQuery.Wild guess，因为图像没有显示在画布中，画布不是图像的大小->而不是document.ready，使用window.load函数。@PHPglue我不同意，我们不能确定这里使用了不止一个.image css类。但是我同意他确实应该使用更好的jquery选择器，以确保在添加其他.image元素时代码不会被破坏。@PHPglue我试过了。但是这样会加载图像，而不是我画布b上的图像ackground@PHPglue我一次只显示一个图像类和一个图像。我可以转到另一个图像，在这种情况下，服务器将获取它，页面将被刷新，脚本将被加载，然后我将调用函数以画布替换图像。我不知道为什么，但这并没有为我添加任何内容。它只是将图像和画布为空。请确保在调用drawContext之前设置了维度：

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