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.当我使用getComputedStyle()时，情况也是如此。

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

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

但这永远不会被击中。

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

Answer 1

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

window.onload = function () { console.log(document.getElementById('memeimg').clientWidth); }
在加载所有图像（不仅仅是第一个）之后，应该触发
window.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>

Answer 2

我认为最常用的聚合物解决方案是使用Polymer's event handling。

<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相关的代码打包在一起，即使您只是有条件地显示图像，它也会起作用（例如{{1} }}）

你在帖子中提到你已经尝试过这个：

<template if="{{something}}">

一般来说这应该有效，但有一些错别字。试试这个（注意this.$.memeImage.addEventListener('onload', function() { console.log("image loaded"); }); - ＆gt; memeImage和memeimg - ＆gt; onload）：

load

同样值得尝试使用this.$.memeimg.addEventListener('load', function(loadEvent) { console.log("image loaded: ", loadEvent); }) vs ready，但我不认为它会在这种情况下产生影响。

Answer 3

同意@charlietfl - 您无法获取尚未加载的图片的尺寸 -

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

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

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

关键是在设置源之前附加事件 - jsfiddle - 如果这不可行 - 请检查here

中的替代方法

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

3 个答案: