Скрипт для установки динамического соотношения изображений прерывается при обновлении кэша

Question

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

Вот пример без обновления моего кэша (он работает): Рабочая сетка

Вот еще один сОбновление кэша: Не работает сетка: все изображения имеют одинаковую ширину

$(document).ready(function() {
  var x = document.getElementsByClassName("card");
  for (i = 0; i < x.length; i++) {
    if (x[i].clientWidth >= x[i].clientHeight) {
      x[i].parentElement.style.width = "23%";
      x[i].style.width = "100%";
    } else {
      x[i].parentElement.style.width = "10%";
      x[i].style.width = "100%";
    }
  }
});

.cards {
  margin-left: 5vw;
  overflow-y: scroll;
  margin-right: 5vw;
  width: 90vw;
}

.workzone {
  height: 80vh;
  width: 90%;
  margin: auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: flex-start;
}

main div div {
  height: 15vh;
  margin: 0.5em;
  border: 1px solid #000;
  overflow: hidden;
}

.cards div::after {
  content: "";
  flex: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main class="cards">
  <div class="workzone">
    <div><img class="card" src="https://via.placeholder.com/350x450"></div>
    <div><img class="card" src="https://via.placeholder.com/350x450"></div>
    <div><img class="card" src="https://via.placeholder.com/350x450"></div>
    <div><img class="card" src="https://via.placeholder.com/150x450"></div>
    <div><img class="card" src="https://via.placeholder.com/350x450"></div>
    <div><img class="card" src="https://via.placeholder.com/3150x450"></div>
    <div><img class="card" src="https://via.placeholder.com/350x450"></div>
    <div><img class="card" src="https://via.placeholder.com/150x450"></div>
    <div><img class="card" src="https://via.placeholder.com/350x450"></div>
    <div><img class="card" src="https://via.placeholder.com/3150x450"></div>
    <div><img class="card" src="https://via.placeholder.com/350x450"></div>
    <div><img class="card" src="https://via.placeholder.com/150x450"></div>
    <div><img class="card" src="https://via.placeholder.com/350x450"></div>
    <div><img class="card" src="https://via.placeholder.com/150x450"></div>
    <div><img class="card" src="https://via.placeholder.com/350x1150"></div>
    <div><img class="card" src="https://via.placeholder.com/350x450"></div>
    <div><img class="card" src="https://via.placeholder.com/3150x450"></div>
    <div><img class="card" src="https://via.placeholder.com/350x4150"></div>
  </div>
</main>

Codepen

Спасибо за вашу помощь