javascript - Modal image gallery displaying incorrect image while loading - Stack Overflow

admin管理员组

文章数量:1388650

I'm making a portfolio website that contains multiple modal image galleries - but a consistent issue I'm having is that when first viewing a large modal image it will display the previously clicked image while waiting for the current one to load. I've tried fiddling with the JavaScript to make it so upon closing a modal it resets the data URL (img.src) completely so it is unable to display the previous image, but have had no luck. (i cannot provide my attempts to code this as i removed the code because it didn't work).

Please note that this only occurs when viewing the image for the first time, and loads a lot slower on my website than it does in this snippet.

Here is the code:

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";
});

   

 .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;
  
}

 <div class="gallery-container expanded" >
              <div class="artwork-container">
 
 <div
            class="artwork" style="width: 23vw; height: 22vw;"
            data-url=".JPG" data-text="DEATHBIRD | 19.06"
          >
            <img
              src=".JPG"
             />
          </div>
          
          <div
            class="artwork" style="width: 26vw; height: 22vw;"
            data-url=".JPG" data-text="SCP-173 | 29.05"
          >
            <img
              src=".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>
          

本文标签： javascriptModal image gallery displaying incorrect image while loadingStack Overflow