可以看到宽度元素，但仍然得到0

Can see width in element, but still get 0

本文关键字：元素      更新时间：2023-09-26

所以我正在研究一个应该是响应的聚合物元素。为此，我需要访问当前图像的宽度。

这是我的标记

  <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");
    })

但是这个永远不会被击中。

我做错了什么，我如何解决它?

我认为最惯用的聚合物解决方案是使用聚合物的事件处理。

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

然后在你的聚合物声明

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，尽管我不认为它应该在这种情况下有什么不同。

看起来图像的onload事件处理程序没有被调用。尝试使用窗口的onload事件:

window.onload = function () {
      console.log(document.getElementById('memeimg').clientWidth);
}

窗口。Onload应该在所有图片加载完毕后触发(不仅仅是第一张图片)。无论如何，如果由于一些奇怪的聚合物相关的原因，正常加载事件的图像不触发，这应该做每个图像的技巧:JS: 

function onThisImageLoaded(thisImage) {
            console.log(thisImage.clientWidth);
}

标记:

<div id="memeImage"><img id="memeimg" src="https://www.gravatar.com/avatar/f9d1450403b864d6b17f30ba0ce0aee3?s=48&d=identicon&r=PG" onload="onThisImageLoaded(this);"></div>

同意@charlietfl -你无法获得尚未加载的图像的尺寸-

事件是'load'而不是'onload'

如果你正在使用jquery -只要试试这个-

 $("#memeimg").on('load', function () {
        console.log("image loaded");
    }).attr('src', 'http://i.imgur.com/xENQisG.jpg');

关键是在设置源文件(此处为jsfield)之前附加事件如果这是不可行的-检查从这里的替代方法

相关文章：