javascript - 可以看到元素的宽度，但仍为0

所以我正在研究应该响应的Polymer元素。为此，我需要访问当前图像的宽度。

这是我的标记

  <div class="meme">
    <div id="memeImage"><img id="memeimg" src="{{img}}"></div>
  </div>

以及（相关的）样式。

  .meme {
    position: relative;
    -webkit-box-align:center;
    -webkit-box-pack:center;
    display:-webkit-box;
  }
  #memeImage {
    z-index: -1;
    border: 0px;
    margin: 0px;
    text-align: center;
    position: relative;
  }

现在我想要的是获取图像的宽度。为此，在我的ready事件中，添加了这两行：

    console.log(this.$.memeImage);
    console.log(this.$.memeImage.clientWidth);

第一个将元素打印得很好，我可以看到clientWidth和offsetWidth是数字。但是第二行显示0。使用getComputedStyle()时也是如此。

我认为这可能是因为尚未加载图像，所以我添加了一个事件处理程序：

    this.$.memeImage.addEventListener('onload', function() {
      console.log("image loaded");
    })

但这永远不会受到打击。

我在做什么错，我该如何解决？

最佳答案

我相信对此最常用的聚合物解决方案是使用Polymer's event handling。

<div class="meme">
  <div id="memeImage"><img id="memeimg" on-load="{{imageLoaded}}" src="{{img}}"></div>
</div>

然后在您的Polymer声明中

Polymer('my-meme', {
  imageLoaded: function() {
    console.log('meme image loaded');
  }
});

很好，因为它不会向顶层名称空间添加任何内容，它会将与meme相关的代码打包在一起，并且即使您仅有条件地显示图像（例如使用<template if="{{something}}">）也可以使用

您在帖子中提到您已经尝试过此操作：

this.$.memeImage.addEventListener('onload', function() {
  console.log("image loaded");
});

一般来说应该可以，但是有一些错别字。尝试以下操作（注意memeImage-> memeimg和onload-> load）：

this.$.memeimg.addEventListener('load', function(loadEvent) {
  console.log("image loaded: ", loadEvent);
})

虽然我认为在这种情况下不应该有所作为，但也许值得尝试使用ready vs domReady。