Получить высоту тегов img, созданных с помощью ng-repeat

Question

Получить высоту тегов img, созданных с помощью ng-repeat

0

У меня есть карусель, изображения которого создаются с помощью ng-repeat. Ширина этих тегов img установлена равной 100%; и высота, авто. Как я могу получить высоту тегов img программно, поскольку это значение изменяется при изменении размера окна? Я пытался

$('#home-carousel img').load(function(){
    console.log($(this).height());
})

но он не работает, поскольку imgs не существуют в то время. Здесь код, с которым я работаю:

<div style="position:absolute; top:0px; z-index:-1" id="home-carousel" class="carousel slide" data-ride="carousel">

  <!-- Here where the problem is -->
  <div class="carousel-inner" role="listbox">
    <div ng-repeat="slide in slides track by $index" class="item" ng-class="{active: $index == 0 }">
      <img src="{{slide.imgUrl}}">
    </div>
  </div>

EDIT: Ладно, позвольте мне уточнить. Это то, чего я пытаюсь достичь: поэтому изображения ведер краски должны быть выровнены точно так, как это выглядит на этом изображении; прямо внизу, где заканчивается фоновое изображение

Проблема в том, что ширина изображения составляет 100%, при изменении размера окна это происходит. Так что я хочу сделать, это получить высоту img-изображений в карусели и поместить ковш для краски на основе этого

digiwebguy 05 сен. 2016, в 20:43

Источник

1

Когда и где вы хотите получить и использовать высоту? Можете ли вы создать скрипку или что-то еще с помощью своего фрагмента кода?
Kishor Pawar 05 сен. 2016, в 18:04
0

предоставим скрипку, чтобы мы могли помочь вам
que1326 05 сен. 2016, в 19:10

Теги:

javascript

jquery

html

angularjs

2 ответа

Ещё вопросы

Когда и где вы хотите получить и использовать высоту? Можете ли вы создать скрипку или что-то еще с помощью своего фрагмента кода?
предоставим скрипку, чтобы мы могли помочь вам

digiwebguy · Answer 1 · 2016-09-06T01-18-00.000Z

Хорошо, поэтому я решил это, выполнив это: во-первых, я использовал ссылку @Braden1996, чтобы получить начальную высоту тега img при первом загрузке

<div style="position:absolute; top:0px; z-index:-1" id="home-carousel" class="carousel slide" data-ride="carousel">

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div ng-repeat="slide in slides track by $index" class="item" ng-class="{active: $index == 0 }">
      <img ng-src="{{slide.imgUrl}}" imageonload="imageLoaded()"><!--here-->
    </div>
  </div>
</div>

Здесь javascript:

$scope.imageLoaded = function(){
  $('.grid-container').css('margin-top',$('#home-carousel').height()-100 );
}

и после этого изменил положение ковров краски каждый раз, когда размер окна изменился.

$(window).resize(function(){
  $('.grid-container').css('margin-top',$('#home-carousel').height()-100 );
})

NB: -100 - это то, что ведро не падает прямо под фоновым изображением

Braden1996 · Answer 2 · 2016-09-05T16-08-00.000Z

Посмотрите на Angular ng-src.
Кроме того, после быстрого поиска я натолкнулся на это, что может показаться вам полезным.

Спасибо за совет ng-src. Не решает эту проблему, но лучше, чем использование src.
и другая ссылка была также очень полезна. Мне всегда было интересно, как определить, полностью ли загружено изображение. еще раз спасибо