как получить высоту и ширину изображения в javascript?

Question

У меня есть код, в котором я пытаюсь получить высоту и ширину всех тегов изображений.

var img = $('.data').find('img');
$.each($(img), function() {
console.log('first', this.height, $(this).height, $(this).height());
console.log('second', $(this).clientHeight, $(this).naturalHeight);
console.log('third',  $(this)[0].height,  $(this)[0].clientHeight,  $(this)[0].naturalHeight);
console.log($(this).attr('height'), $(this).prop('height'));                                                                                                     });

Даже я пытался использовать img в l oop.

попробовал то же самое с шириной, результат будет либо 0, либо undefined. пробовал то же самое для width.

Можете ли вы сказать мне, где я делаю не так

Answer 1

Вы передаете $(img), это должно быть только img внутри вас $.each. Также вы, когда печатаете console.log('first',.. вместо этого, если ваше изображение имеет атрибут name, используйте это.

Здесь это демонстрационный код:

var img = $('.data').find('img');
$.each(img, function() {
  console.log($(this).attr("name") + "-> Height: " + $(this)[0].height + " Width:" + $(this)[0].width);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="data">
  <img name="image1" src=" https://twimg0-a.akamaihd.net/a/1350072692/t1/img/front_page/jp-mountain@2x.jpg" style="height:70px;width:70px">
  <img name="image2" src=" https://twimg0-a.akamaihd.net/a/1350072692/t1/img/front_page/jp-mountain@2x.jpg" style="height:40px;width:40px">
  <img name="image3" src=" https://twimg0-a.akamaihd.net/a/1350072692/t1/img/front_page/jp-mountain@2x.jpg" style="height:50px;width:50px">
</div>

Answer 2

Я не получал высоту и ширину изображения, потому что событие image load происходит очень поздно в процессе загрузки

Наконец я нашел ответ

var img = $('.data').find('img');
$.each(img, function() {
  $(this).bind('load', function() { 
    console.log($(this).height);
  }
});

это сработало для img и $(img)