简易图片画廊淡入淡出效果闪烁问题求助

问题背景 #

• 正在学习JavaScript，制作带顶部图片画廊的网页，已实现随机切换图片的淡入淡出效果，但每隔一次切换会出现闪烁。
• 通过PHP从服务器加载图片列表，使用setInterval每隔5秒调用crossfadeII函数实现切换。
• 希望仅用原生JavaScript解决，不依赖任何库。

核心JavaScript代码 #

let imgNamesArray = [];
let currentIndex = 0;
let previousIndex = 0;
const currentImage = document.getElementById('currentImage');
const nextImage = document.getElementById('nextImage');

function preloadImages() {
    for (let i = 0; i < imgNamesArray.length; i++) {
        const image = new Image();
        image.src = `./images/${imgNamesArray[i]}`;
        image.onload = () => {
            // 图片预加载完成后的可选操作
        };
    }
}

fetch("gallery.php")
.then(response => response.json())
.then(fetchedData => {
    imgNamesArray = fetchedData;
    console.log(imgNamesArray);

    preloadImages();

    const initialIndex = Math.floor(Math.random() * imgNamesArray.length);
    const initialImageSrc = `./images/${imgNamesArray[initialIndex]}`;
    currentImage.src = initialImageSrc;  
    currentImage.classList.add('current');
    nextImage.classList.add('next');

    setInterval(crossfadeII, 5000);

})
.catch(error => console.error("Error: ", error));

function displayNextImage() {
    currentIndex = (currentIndex + 1) % imgNamesArray.length;
    console.log(currentIndex);
    currentImage.src = `./images/${imgNamesArray[currentIndex]}`;
}

function crossfadeII() {
    let newIndex; 
    do {
        newIndex = Math.floor(Math.random() * imgNamesArray.length);
    } while (newIndex === previousIndex || newIndex === currentIndex);

    previousIndex = currentIndex;
    currentIndex = newIndex;

    // 预加载下一张要显示的图片，确保加载完成后再切换
    const nextImageSrc = `./images/${imgNamesArray[currentIndex]}`;
    const tempImage = new Image();
    tempImage.src = nextImageSrc;

    tempImage.onload = () => {
        // 先更新隐藏的nextImage的src
        nextImage.src = nextImageSrc;
        
        // 切换类名实现淡入淡出
        currentImage.classList.toggle('current');
        currentImage.classList.toggle('next');
        nextImage.classList.toggle('current');
        nextImage.classList.toggle('next');

        // 交换current和next的引用，方便下次切换
        [currentImage, nextImage] = [nextImage, currentImage];
        // 同时更新索引，确保下次随机不重复
        previousIndex = currentIndex;
    };

    // 预加载下下个图片，提前缓存
    const preloadIndex = (currentIndex + 1) % imgNamesArray.length;
    const preloadImage = new Image();
    preloadImage.src = `./images/${imgNamesArray[preloadIndex]}`;

    console.log(`previousIndex: ${previousIndex}, currentIndex: ${currentIndex}, newIndex: ${newIndex}`);
}

问题原因与修复说明 #

1. 闪烁根源：原代码中直接修改currentImage.src后立即切换类名，此时图片可能还未加载完成，浏览器会显示空白或占位符，导致闪烁。
2. 修复要点：
   • 新增图片加载监听：创建临时Image对象，等图片完全加载后再执行切换逻辑，确保显示时图片已就绪。
   • 调整切换顺序：先把新图片设置到隐藏的nextImage元素，加载完成后再切换类名实现淡入淡出，避免未加载的图片直接显示。
   • 交换元素引用：每次切换后交换currentImage和nextImage的变量引用，简化后续切换逻辑，避免类名判断混乱。
3. 预加载优化：保留预加载下下个图片的逻辑，进一步减少后续切换的加载延迟。

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