模态图片画廊加载时显示错误图片的问题求助

我正在做一个作品集网站，里面包含多个模态图片画廊，但一直遇到个头疼的问题：第一次查看大尺寸模态图片时，在当前图片加载完成前，会显示之前点击过的图片。

我试过调整JavaScript代码，想实现关闭模态框时完全重置图片的src属性，这样就不会再显示旧图片了，但折腾半天都没成功（因为代码没起作用我已经删掉了，没法提供之前的尝试版本）。

需要说明的是，这个问题只在第一次查看图片时出现，而且在我的网站上加载速度比下面的代码片段慢很多。

我的代码如下： #

HTML 代码

<div class="gallery-container expanded" >
  <div class="artwork-container">
    <div
      class="artwork" style="width: 23vw; height: 22vw;"
      data-url="https://sinniister.neocities.org/ARTWORK/2023VW/2023VW5.JPG" data-text="DEATHBIRD | 19.06"
    >
      <img
        src="https://sinniister.neocities.org/ARTWORK/2023VW/2023VW5S.JPG"
       />
    </div>
    
    <div
      class="artwork" style="width: 26vw; height: 22vw;"
      data-url="https://sinniister.neocities.org/ARTWORK/2024VW/2024VW3.JPG" data-text="SCP-173 | 29.05"
    >
      <img
        src="https://sinniister.neocities.org/ARTWORK/2024VW/2024VW3S.JPG"
       />
    </div>
  </div>
</div>

<div
  class="full-res-overlay"
  id="full-res-overlay"
  onclick="closeFullRes()"
>
  <img
    src=""
    alt="Full Resolution Artwork"
    class="full-res-image"
    id="full-res-image"
  />
  
  <div id="caption" style="color: white;"
  ></div>
  
</div>

CSS 代码

.gallery-container {
  width: 98%;
  max-width: 98%;
  padding: 0;
  background-color: transparent;
  border-radius: 10px;
  text-align: center;
}

.artwork-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}
.artwork {
  cursor: url('/KISSCURSEGREEN.png'), pointer;
  width: 18vw;
  height: 25vw;
  max-width: 100%;
  position: relative;
  
}

.artwork:hover {
  opacity: 0.8;
  transform: scale(95%);
  transition: opacity 0.3s ease;
  transition: transform 0.3s ease;
}

.artwork img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.full-res-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  z-index: 10; 
  text-align: center;
}
.full-res-image {
  max-width: 80%;
  max-height: 80%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.caption {
  font-size: 2vw;
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  height: 150px;
}

JavaScript 代码

var imageDivs = document.querySelectorAll(".artwork");

imageDivs.forEach(function(div) 
{ 
  div.addEventListener("click", function(e) 
  { 
    const overlay = document.getElementById("full-res-overlay");
    const fullResImage = document.getElementById("full-res-image");
    const captionText = document.getElementById("caption");
    fullResImage.src = this.dataset.url;
    overlay.style.display = "block";
    captionText.innerHTML = this.dataset.text;
  });
});

document.querySelector("#full-res-overlay").addEventListener("click", function(e) {
  this.style.display = "none";
});

备注：内容来源于stack exchange，提问作者Louis Cairns