React使用styled-components实现背景图轮播切换出现白闪问题

问题场景 #

在React项目中为Hero首屏英雄区实现6张背景图自动循环切换效果时，使用styled-components编写关键帧动画后功能符合预期，但图片切换间隙会出现白闪。

原有实现代码 #

React组件部分：

return (
  <IntroContainer scroll={scrollVal}>
     
      <ValueText>If your business is selected, our team of developers will build you a digital tool that takes your business to the next level.
      </ValueText>
    
      <BenefitsList>
        <BenefitsHeader>BENEFITS</BenefitsHeader> 
        <ListItem>Open-Source Engineers</ListItem> 
        <ListItem>Partner with a Nonprofit</ListItem>
        <ListItem>Custom Tools (Need Image)</ListItem>
        <ListItem>Meet your Needs (Need Image)</ListItem>
        <ListItem>Gain an Advantage (Need Image)</ListItem>
      </BenefitsList>

 </IntroContainer>

);

styled-components样式部分：

const breatheAnimation = keyframes`
0% { background-image : url(${imageList[0]})}  
4% { background-image: url(${imageList[0]})}  
12% {background-image :url(${imageList[1]})}     
38% {background-image :url(${imageList[2]})}    
52% {background-image :url(${imageList[3]})}     
68% {background-image :url(${imageList[4]})}     
94% {background-image :url(${imageList[5]})}     
100% {background-image :url(${imageList[0]})}     
`
export const IntroContainer = styled.div`
height: auto;
display:flex;
align-items:center;
justify:content:center;
min-height: 45vh;
animation-name: ${breatheAnimation};
animation-iteration-count: infinite;
animation-duration: 20s;
background-repeat: no-repeat;

background-size:cover;
background-position: 0px ${props=>props.scroll}px;
z-index: -1;
`;

问题根因 #

• background-image属性本身不支持平滑过渡，关键帧触发时是硬切替换图片，浏览器在切换瞬间才开始加载下一张图，资源加载完成前会显示底层的白色/透明区域
• 关键帧节点没有设置交叠缓冲区间，两张图切换没有过渡时间
• 没有提前预加载背景图，除首图外的其他图片都是切换到对应关键帧时才发起网络请求
• 原代码存在样式笔误：justify:content:center为错误写法，正确属性为justify-content:center，会导致flex布局居中不生效

修复方案 #

方案1：彻底解决（推荐） #

用多层绝对定位背景堆叠+透明度淡入淡出动画替换原生background-image硬切，配合图片预加载，完全消除白闪，还能实现顺滑的淡入淡出切换效果：

1. 组件挂载时预加载所有背景图，存入浏览器缓存

import { useEffect } from 'react';

// 组件内添加预加载逻辑
useEffect(() => {
  imageList.forEach(src => {
    const preloadImg = new Image();
    preloadImg.src = src;
  });
}, []);

2. 替换原有styled-components样式代码

import styled, { keyframes } from 'styled-components';

// 单张背景图的淡入淡出动画
const fadeSlide = (imgIndex, total = 6) => keyframes`
  ${''}
  const singleStay = 100 / total;
  0% { opacity: 0; }
  ${(imgIndex * singleStay) - singleStay}% { opacity: 0; }
  ${imgIndex * singleStay}% { opacity: 1; }
  ${((imgIndex + 1) * singleStay) - singleStay}% { opacity: 1; }
  ${(imgIndex + 1) * singleStay}% { opacity: 0; }
  100% { opacity: 0; }
`;

// 单个背景层样式
const BgLayer = styled.div`
  position: absolute;
  inset: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 0 ${props => props.scroll}px;
  z-index: -1;
  animation: ${props => fadeSlide(props.imgIndex)} 20s infinite linear;
`;

// 修改后的容器样式，修复原有笔误
export const IntroContainer = styled.div`
  position: relative;
  min-height: 45vh;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  z-index: 1;
`;

3. 修改JSX结构，渲染所有堆叠背景层

return (
  <IntroContainer scroll={scrollVal}>
    {/* 渲染所有堆叠背景层 */}
    {imageList.map((imgSrc, idx) => (
      <BgLayer
        key={idx}
        imgIndex={idx}
        scroll={scrollVal}
        style={{ backgroundImage: `url(${imgSrc})` }}
      />
    ))}
    {/* 原有业务内容 */}
    <ValueText>If your business is selected, our team of developers will build you a digital tool that takes your business to the next level.
    </ValueText>
  
    <BenefitsList>
      <BenefitsHeader>BENEFITS</BenefitsHeader> 
      <ListItem>Open-Source Engineers</ListItem> 
      <ListItem>Partner with a Nonprofit</ListItem>
      <ListItem>Custom Tools (Need Image)</ListItem>
      <ListItem>Meet your Needs (Need Image)</ListItem>
      <ListItem>Gain an Advantage (Need Image)</ListItem>
    </BenefitsList>
  </IntroContainer>
);

方案2：快速修复（无需改动DOM结构） #

如果不想调整现有结构，可以通过加兜底背景色+调整关键帧节点+预加载图片的方式缓解白闪：

// 组件内加预加载逻辑
useEffect(() => {
  imageList.forEach(src => {
    const preloadImg = new Image();
    preloadImg.src = src;
  });
}, []);

const breatheAnimation = keyframes`
0% { background-image : url(${imageList[0]})}  
15% { background-image: url(${imageList[0]})}  
16% {background-image :url(${imageList[1]})}     
32% {background-image :url(${imageList[1]})}  
33% {background-image :url(${imageList[2]})}    
49% {background-image :url(${imageList[2]})} 
50% {background-image :url(${imageList[3]})}     
66% {background-image :url(${imageList[3]})} 
67% {background-image :url(${imageList[4]})}     
83% {background-image :url(${imageList[4]})} 
84% {background-image :url(${imageList[5]})}     
99% {background-image :url(${imageList[5]})}     
100% {background-image :url(${imageList[0]})}     
`
export const IntroContainer = styled.div`
height: auto;
display:flex;
align-items:center;
justify-content:center; // 修复原有笔误
min-height: 45vh;
animation-name: ${breatheAnimation};
animation-iteration-count: infinite;
animation-duration: 20s;
background-repeat: no-repeat;
// 添加和首图主色调接近的兜底背景，避免白闪
background-color: #121212;
background-size:cover;
background-position: 0px ${props=>props.scroll}px;
z-index: -1;
`;

内容的提问来源于stack exchange，提问作者Omran 3dmax