刷新缓存时，用于设置动态图像比率的脚本会中断

Question

我创建了this script。它允许我根据原始尺寸创建2种图像比率。它可以在CodePen和本地上运行，但是当我重新加载缓存时，它通常不起作用，我也不知道为什么。我认为这与图片的加载时间有关。

这是一个示例，其中没有刷新我的缓存（它可以工作）：Working grid

这是另一个刷新了缓存的文件：Not working grid : all the images got the same width

$(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

感谢您的帮助