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

Question

所以我正在研究一个应该具有响应能力的 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。当我使用 getCompulatedStyle() 时也是如此。

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

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

但这永远不会受到打击。

我做错了什么以及如何解决它？

Answer 1

我相信最惯用的 polymer 解决方案是使用 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与 domReady尽管我认为在这种情况下这不会有什么不同。