Как я могу изменить высоту элемента при загрузке изображения?

Question

Я написал функцию для изменения высоты элемента при загрузке изображения:

$(document).ready(function () {


  $("img").load(function() {
    var width = $(this).width();
    $(".item").height(width*0.85);
  });

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

The html:

<div class="row row-10 items-grid">
         <div class="col-md-4 col-xs-6">
             <a class="item">
                  <img src="/get/2" alt="">
                  <div class="overlay">
                      <h2 class="">Dogs</h2>
                  </div>
             </a>
          </div>

          <div class="col-md-4 col-xs-6">
            <a class="item" >
                 <img src="/get/3" alt="">
                <div class="overlay">
                <h2 class="uppercase">Cats</h2>
               </div>
            </a>
          </div>
        </div>

Answer 1

Вы можете попробовать l oop всех изображений, а затем добавить событие onload к каждому из них в отдельности, и когда каждое изображение будет загружено, вы можете обновить высоту элемента, ближайшего к изображению, а не все .item элементов одновременно, например:

$(document).ready(function() {
  $('img').each(function() {
    var $this = $(this);
    var img = new Image();
    img.onload = function() {
      var width = $(this).width();
      $this.closest(".item").height(width * 0.85);
    };
    img.src = $(this).attr('src');
  });
});