如何解决jQuery灯箱图片轮播切换前图片闪烁，实现平滑淡出？

The flash you're seeing is almost certainly due to one of two common issues: either the new image isn't preloaded (causing a brief blank state while it downloads), or the current image is being hidden/removed abruptly before the new image is ready to display. Here's how to fix it with smooth, flicker-free transitions:

Core Fix Principles #

1. Preload the next image before starting any transition to avoid gaps from loading delays.
2. Use overlapping image elements so the new image is already in place (but hidden behind the current one) before fading out the old image.
3. Chain transitions with callbacks to ensure steps only happen after the previous animation finishes—no abrupt state changes.

Modified Code Example #

First, update your lightbox HTML to include a container that supports overlapping images:

<div id="post-viewer">
  <div class="image-container">
    <img class="current-image" src="initial-image.jpg" alt="Post Content">
  </div>
  <!-- Your navigation buttons here -->
</div>

Add this CSS to position images correctly:

#post-viewer .image-container {
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
}

#post-viewer .image-container img {
  display: block;
  width: 100%;
  height: auto;
}

Now, revise your jQuery function to implement smooth transitions:

// Add a flag to prevent multiple concurrent transitions
let isLightboxAnimating = false;

function view_post(id, nav) {
  if (isLightboxAnimating) return;
  isLightboxAnimating = true;

  const viewer = $("#post-viewer");
  const imageContainer = viewer.find(".image-container");
  const currentImage = imageContainer.find(".current-image");
  let userid = '';
  let page = '';
  let newImageSrc = '';

  // --- Your existing logic to fetch newImageSrc based on nav/id goes here ---
  // Example: if nav is 'next', grab the next image URL from your post list
  if (nav != undefined && nav) {
    const lists = $(".post-list");
    // ... your code to determine newImageSrc ...
  } else {
    // Load initial image for the given id
    // ... your code to set newImageSrc ...
  }

  // Step 1: Preload the new image
  const newImage = $("<img>")
    .attr("src", newImageSrc)
    .addClass("temp-image")
    .css({
      position: "absolute",
      top: 0,
      left: 0,
      width: "100%",
      zIndex: 1 // Place behind current image
    });

  // Step 2: Wait for new image to load before transitioning
  newImage.on("load", function() {
    // Ensure current image is on top
    currentImage.css("zIndex", 2);
    // Add new image to the container
    imageContainer.append(newImage);

    // Step 3: Fade out current image smoothly
    currentImage.fadeOut(300, function() {
      // Clean up after fade completes
      $(this).remove();
      newImage.removeClass("temp-image").addClass("current-image").css("zIndex", 2);
      // Re-enable navigation
      isLightboxAnimating = false;
    });
  });

  // Handle cached images (load event might not fire)
  if (newImage[0].complete) {
    newImage.trigger("load");
  }
}

Why This Works #

• Preloading: By waiting for the new image to fully load before starting the transition, we eliminate any blank screen caused by network delays.
• Overlapping Elements: The new image is positioned directly behind the current one, so when we fade out the old image, the new one is already there—no sudden jumps.
• Callback Safety: The fadeOut callback ensures we only remove the old image and update the new one once the animation is done, preventing any abrupt visibility changes that cause flashing.

Extra Tip #

If you notice the flash still occurs with cached images, double-check that your CSS doesn't have any default transitions or visibility toggles that might interfere. Also, ensure your navigation buttons are disabled during the transition (via the isLightboxAnimating flag) to prevent users from spamming clicks and breaking the flow.

内容的提问来源于stack exchange，提问作者Mark