如何在图像加载时更改元素的高度？

Question

我编写了一个函数来更改图像加载时元素的高度：

$(document).ready(function () {


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

问题是，当我重新加载页面时，有时它可以工作，有时不起作用。只是randomley somthimes的高度发生了变化，有时没有变化。如何使它始终有效

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

您可以尝试循环播放所有图像，然后分别向其中每个图像添加图像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');
  });
});