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

Posted 2023-03-03

【中文标题】更改图像的来源使其在第一次单击时其宽度/高度为零

【英文标题】：Changing the source for an image makes its width/height zero on the first click

【发布时间】：2011-12-26 14:23:39

【问题描述】：

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

我遇到的问题是，在第一次单击时，图像的高度和宽度为零，并且没有绘制任何内容。在第二次单击时，它可以完美运行，并且它会继续完美运行，直到我选择了不同的图像，然后第一次单击不再起作用。

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

代码如下：

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

感谢任何建议。此代码仅在单击单独按钮时调用，因此无法在页面加载时调用图像。

编辑：

我还想提一下，手动设置图像宽度/高度“new Image(52,52)”仍然需要单击两次，因为图像没有加载。

【参考方案1】：

是的，那是因为调用 .width 属性时，图像还没有加载到 DOM 中。你所做的只是设置源。这就是单击按钮后它起作用的原因。您必须先将图像加载到 DOM 中，然后才能确定宽度。

你在使用框架吗？

如果没有，这可能会有所帮助。 http://www.webdeveloper.com/forum/showthread.php?t=108392

【讨论】：

您链接到的示例对我不起作用。我收到的警报消息未定义宽度/高度未定义

【参考方案2】：

既然你有一个 jQuery 标签，我会使用 jQuery 来做这件事。实际上，问题在于在加载图像之前不知道宽度和高度。改为这样做：

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

【讨论】：

您的解决方案对我不起作用。还是按了两下。 @image_object "this" 是你的例子吗？

否；在您的示例代码中，您设置了this.width 和this.height；我不知道您的示例代码中的this 是什么，但这就是我的this 想要的。

使用正确的this仍然没有解决问题。我的宽度和高度仍然为 0。

我遗漏了一个重要的细节；图像可能还需要包含在 DOM 中，然后才具有@polyhedron 提到的宽度和高度。请参阅我的更新代码，该代码还将新创建的 img 放入容器中。

感谢您的帮助。很遗憾，您的最新解决方案也不起作用。

【参考方案3】：

您很可能希望在页面加载后立即加载所有图像。为此，我使用以下函数：

  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

在这个函数之外的某个地方，imageURLs 应该被定义为一个图像 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 应该被初始化为一个空映射。