Javascript 更改图像的源会在第一次单击时使其宽度/高度为零

当我从服务器上已有的各种选择中选择一个图像，然后单击画布时，将在单击的地方绘制一个图像

我遇到的问题是，在第一次单击时，图像的高度和宽度为零，并且没有绘制任何内容。在第二次单击时，它工作正常，并且继续工作正常，直到我选择一个不同的图像，然后第一次单击不再工作

我猜，因为它只发生在为图像选择新源时，这与设置宽度和高度时尚未加载的图像有关

代码如下：

其中source是一个字符串示例：“sample/ball.png”、“sample/dog.png”

Javascript：

  this.image_object = new Image();
  this.image_object.src = source;
  this.width = this.image_object.width;
  this.height = this.image_object.height;

@image_object = new Image()
@image_object.src = source
@width = @image_object.width
@height = @image_object.height

咖啡脚本：

  this.image_object = new Image();
  this.image_object.src = source;
  this.width = this.image_object.width;
  this.height = this.image_object.height;

@image_object = new Image()
@image_object.src = source
@width = @image_object.width
@height = @image_object.height

如有任何建议，我们将不胜感激。此代码仅在单击单独的按钮时调用，因此无法在页面加载时调用图像

编辑：

---

我还想指出，由于未加载图像，手动设置图像宽度/高度“new image（52,52）”仍然需要两次单击。

是的，这是因为调用.width属性时图像尚未加载到DOM中。您所做的只是设置源代码。这就是为什么它在点击按钮后工作。在确定宽度之前，必须将图像加载到DOM中

您使用的是框架吗

如果没有，这可能会有所帮助。

---

因为您有一个jQuery标记，所以我将使用jQuery来实现这一点。事实上，问题是在加载图像之前，宽度和高度是未知的。改为这样做：

var container = this;
var theImg = $('<img/>')
    .appendTo($(container))
    .load(function() { 
        $(container).width(theImg.width()).height(theImg.height());
    })
    .attr('src', source);

var container=this；
var theImg=$（'您很可能希望在页面加载后立即加载所有图像。为此，我使用以下函数：

  loadImages = (fxDone) ->
    doneCount = 0 
    total = imageURLs.length
    for imageURL in imageURLs
      imageName = imageURL.slice(0, imageURL.lastIndexOf("."))
      images[imageName] = new Image()
      images[imageName].onload = ->
        doneCount++
        if doneCount == total
          fxDone()
      images[imageName].src = imageURL

在这个函数之外的某个地方，
imageURL
应该定义为图像URL的列表。而
images
应该初始化为空映射。我在
onload
处理程序中调用它，并传递一个函数
fxDone
，以启动依赖于加载的图像的操作

另一个选项是，如果图像尚未加载，则在单击时加载。请注意，第一次单击的响应速度会稍慢。我将按如下方式执行此操作：

if @images[source]?
  @width = @images[source].width
  @height = @images[source].height
else
  @images[source] = new Image()
  @images[source].onload = ->
    @width = @images[source].width
    @height = @images[source].height
  @images[source].src = source

除此之外，
@images
应初始化为空映射。
您链接到的示例对我不起作用。我收到的警报消息未定义宽度/高度。您的解决方案对我不起作用。它仍然需要单击两下。是@image\u对象“this”吗是您的示例吗？不是；在示例代码中，您正在设置
this.width
和
this.height
；我不知道示例代码中的
this
是什么，但这正是我的
this
尝试的。使用正确的this仍然无法解决问题。我的宽度和高度仍然是0。我遗漏了一个重要的细节；不是在图像具有@polyhedron所述的宽度和高度之前，可能还需要将其包含在DOM中。请参阅我的更新代码，该代码还将新创建的
img
放入容器中。我感谢您的帮助。不幸的是，您的最新解决方案也不起作用。