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

Wait for image added to CSS to load - JQuery

本文关键字：图像 加载 -JQuery CSS 添加 等待      更新时间：2023-09-26

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

$("img").hide();

然后我创建一个画布，并将其放在html中id为drawing的同一div中。然后，我将画布的背景设置为与我隐藏的图像的img src相同。这使它看起来像一幅图像，但现在它实际上是一幅以图像为背景的画布。我通过：

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

我遇到的问题是，有时图像没有显示在画布中，画布也不是图像的大小。我想这可能是因为装载问题。我该如何等待画布将图像显示在背景中？谢谢

Edit：请注意，在DOM中，画布总是有正确的src。它只是不显示

编辑2：这是JSfiddle。在这里，一切看起来都很好，但我的代码中还有很多要做的事情，包括从服务器上获取东西，所以速度较慢。希望这能帮助你们理解问题：http://jsfiddle.net/wL3ezLke/2/再次感谢

您需要使用：

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

官方文件：https://api.jquery.com/ready/

如果我理解正确，你的问题是知道图像何时加载（根据你的描述，可能还有很多其他问题）。

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

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

至

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

因此CCD_ 2和CCD_。

相关文章：