Может видеть ширину элемента, но все равно получить 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

Я считаю, самым идиоматическим решением для полимера является использование 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'); 
    } 
}); 

Это хорошо, потому что он ничего не добавляет к пространству имен верхнего уровня, он сохраняет код, связанный с мемой упакованной вместе, и он будет работать, даже если вы показываете изображение только условно (например,с <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 2

Согласен с @charlietfl - вы не можете получить размеры изображения, которые еще не загружены -

Событие 'load' и не 'onload'

если вы используете JQuery - просто попробуйте это -

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

ключ должен прикрепить событие перед установкой источника - jsfiddle здесь - Если это не выполнимо - Проверьте альтернативный подход от here

Answer 3

Похоже, что обработчик события onload для изображения не вызван. Попробуйте использовать OnLoad событие окна:

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

window.onload должен быть уволен после того, как были загружены все изображения (не только первый). в любом случае, если по какой-то странной Polymer связанной причине нормальное событие нагрузки для изображения не срабатывает, то это должно сделать трюк на изображение: 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>