可以看到元素的寬度，但仍為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。使用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的事件處理 。

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

這很好，因為它不會向頂層名稱空間添加任何內容，它會將與模因相關的代碼打包在一起，並且即使您僅有條件地顯示圖像（例如，使用<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 。

Answer 3

同意@charlietfl-您無法獲取尚未加載的圖像的尺寸-

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

如果您使用的是jQuery，請嘗試以下操作-

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

關鍵是在設置源之前附加事件-jsfiddle在這里-如果這樣做不可行 -從此處檢查替代方法