Firefox中切换srcset时过渡后图片闪烁问题求助

我之前做图片淡入淡出切换时也碰到过Firefox的这个闪烁问题，结合你的代码场景来看，主要原因是Firefox对srcset资源的预加载和缓存机制和Chrome等浏览器不同——当你在过渡结束后直接切换srcset时，新的图片资源可能还没完成加载，导致短暂出现空白或者旧图残留的闪烁现象。下面给你几个亲测有效的解决办法：

1. 预加载新图片资源再切换 #

在更新srcset之前，先创建一个隐藏的<img>元素预加载新的图片资源，等资源加载完成后再替换目标元素的srcset，这样Firefox就能直接从缓存读取资源，避免闪烁。示例代码如下：

async transitionEndIn(event: TransitionEvent) {
  // 假设newInSrcSet是你要切换的新图片srcset值
  const newSrcSet = "your-new-image-srcset-here";

  // 预加载资源，同时匹配元素的sizes确保加载对应分辨率的图片
  const preloadImg = new Image();
  await new Promise((resolve, reject) => {
    preloadImg.onload = resolve;
    preloadImg.onerror = reject;
    preloadImg.srcset = newSrcSet;
    preloadImg.sizes = (event.target as HTMLImageElement).sizes;
  });

  // 预加载完成后再更新srcset并移除过渡类
  this.inSrcSet = newSrcSet;
  (event.target as HTMLImageElement).classList.remove('in');
}

// 同理处理transitionEndOut方法
async transitionEndOut(event: TransitionEvent) {
  const newOutSrcSet = "your-new-out-image-srcset-here";
  const preloadImg = new Image();
  await new Promise((resolve, reject) => {
    preloadImg.onload = resolve;
    preloadImg.onerror = reject;
    preloadImg.srcset = newOutSrcSet;
    preloadImg.sizes = (event.target as HTMLImageElement).sizes;
  });
  this.outSrcSet = newOutSrcSet;
  (event.target as HTMLImageElement).classList.remove('out');
}

2. 确保过渡与资源加载无缝衔接 #

如果你的切换逻辑是交替使用两个<img>元素（一个显示一个隐藏），可以在组件中维护一个加载状态，只有当新图加载完成后，才允许触发下一次淡入淡出操作，避免资源未加载完成就切换导致的闪烁：

private isLoading = false;

async transitionEndIn(event: TransitionEvent) {
  if (this.isLoading) return;
  this.isLoading = true;

  const newSrcSet = "your-new-image-srcset-here";
  const preloadImg = new Image();
  await new Promise(resolve => {
    preloadImg.onload = () => {
      this.inSrcSet = newSrcSet;
      (event.target as HTMLImageElement).classList.remove('in');
      this.isLoading = false;
      resolve(null);
    };
    preloadImg.srcset = newSrcSet;
  });
}

3. 调整CSS优化显示行为 #

给<img>元素添加以下CSS属性，强制Firefox在资源加载完成前保持当前元素的可见性，避免空白闪烁：

img {
  visibility: visible !important;
  opacity: 1;
  transition: opacity 0.3s ease;
}

img.in {
  opacity: 1;
  visibility: visible;
}

img.out {
  opacity: 0;
  /* 不要设置visibility: hidden，否则会暂停该元素的图片资源加载 */
}

注意：不要在out类中设置visibility: hidden，这会让Firefox暂停加载该元素的图片资源，导致下次切换时需要重新加载，反而加重闪烁问题。

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