styled-components的div实现图片懒加载解决背景图闪烁问题

闪烁的核心原因是初始渲染时背景图资源未加载完成，容器处于无背景的空白状态，资源加载完成后背景突然绘制导致视觉跳变。另外你原有代码末尾多写了一个闭合大括号，会导致样式语法错误，改造时注意修正。
以下是完全适配styled-components的实现，同时支持视口懒加载，从根源解决闪烁问题：

首先改造背景图容器的styled定义，增加不同加载状态的样式规则：

import styled, { css } from 'styled-components';
import { useEffect, useRef, useState } from 'react';

const BackgroundImage = styled.div`
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  /* 默认设置灰色占位底，避免容器空白 */
  background-color: #f0f0f0;
  /* 传入低清占位图时启用模糊占位效果 */
  ${props => props.$placeholder && css`
    background-image: url(${props.$placeholder});
    filter: blur(8px);
    transform: scale(1.05);
  `}
  /* 目标图加载完成后替换背景，加平滑过渡消除跳变 */
  ${props => props.$loaded && css`
    background-image: url(${props.$src});
    filter: blur(0);
    transform: scale(1);
    transition: all 0.3s ease-in-out;
  `}
`

封装可复用的懒加载背景组件，结合Intersection Observer实现视口判断+图片预加载逻辑：

const LazyBackground = ({ 
  src, 
  placeholder,
  children, 
  ...rest 
}) => {
  const [isInView, setIsInView] = useState(false);
  const [loaded, setLoaded] = useState(false);
  const containerRef = useRef(null);

  // 监听元素是否进入视口触发范围
  useEffect(() => {
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          setIsInView(true);
          observer.unobserve(entry.target);
        }
      })
    }, {
      rootMargin: '200px 0px', // 提前200px开始加载，避免用户等待
      threshold: 0.01
    });

    if (containerRef.current) {
      observer.observe(containerRef.current);
    }

    return () => observer.disconnect();
  }, [])

  // 进入视口后预加载目标图片，加载完成再更新状态
  useEffect(() => {
    if (!isInView || !src) return;
    const img = new Image();
    img.src = src;
    img.onload = () => setLoaded(true);
    img.onerror = () => {
      // 可自行扩展加载失败的兜底逻辑
      console.warn('背景图加载失败:', src)
    }
  }, [isInView, src])

  return (
    <BackgroundImage
      ref={containerRef}
      $src={src}
      $placeholder={placeholder}
      $loaded={loaded}
      {...rest}
    >
      {children}
    </BackgroundImage>
  )
}

业务场景直接调用即可：

<LazyBackground
  src="正式高清背景图地址"
  placeholder="压缩至几KB的低清缩略图地址（可选）"
  style={{ width: '100%', height: '400px' }}
>
  容器内部业务内容
</LazyBackground>

实现要点说明 #

• 防闪烁逻辑：只有当目标图片通过JS预加载完成后，才会把正式图设置为容器背景，配合短过渡动画实现平滑切换，默认的占位底色/模糊低清图会始终填满容器，不会出现空白跳变
• 懒加载逻辑：默认不加载视口外的图片资源，仅当容器距离视口200px范围内时才发起请求，有效降低首屏带宽占用
• 语法注意：组件自定义props前缀加$是styled-components v5.1+支持的临时属性特性，不会将自定义属性透传到真实DOM节点，避免控制台抛出无效HTML属性警告
• 兼容说明：Intersection Observer已覆盖98%以上的全球浏览器用户，如果需要兼容IE等极老环境，引入对应polyfill即可正常运行
• 体验优化：低清占位图可以把原图压缩到10KB以内，配合模糊效果可以让用户感知更快的加载速度，不想做占位图直接省略该参数即可，靠灰色占位也能解决闪烁问题

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