react-lazy-load-image-component如何实现图片完全加载后再显示？

使用react-lazy-load-image-component组件时，设置blur效果后，主图（src）并未完全隐藏，而是从顶部向下逐步显示直到加载完成，希望实现主图完全隐藏，加载完成后再切换显示。

相关截图 #

相关代码 #

import bg from "./img/bg.png";
import react_img from "./logo.svg";

...

<LazyLoadImage 
  effect='blur'
  src={bg}
  placeholderSrc={react_img}
  alt='stuff'
  height="200px"
  width="200px"
/>

react-lazy-load-image-component的内置blur效果逻辑就是渐进式加载主图：主图在加载过程中会逐步显现，同时占位图的模糊效果逐渐减弱直至消失，这是组件预设的交互行为，并非功能异常。

方法1：自定义CSS覆盖默认行为 #

通过自定义样式强制主图在加载完成前完全隐藏，加载完成后再平滑显示：

1. 给组件添加自定义类名：

<LazyLoadImage 
  effect='blur'
  src={bg}
  placeholderSrc={react_img}
  alt='stuff'
  height="200px"
  width="200px"
  className="custom-lazy-image"
/>

2. 添加对应的CSS：

/* 加载完成前隐藏主图 */
.custom-lazy-image .react-lazy-load-image-component--image {
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* 加载完成后显示主图 */
.custom-lazy-image.react-lazy-load-image-component--loaded .react-lazy-load-image-component--image {
  opacity: 1;
}

/* 确保占位图在加载过程中正常显示 */
.custom-lazy-image .react-lazy-load-image-component--placeholder {
  opacity: 1 !important;
}

方法2：手动实现占位图切换逻辑 #

放弃组件内置的blur效果，自己控制占位图和主图的显示时机：

import { useState } from 'react';
import bg from "./img/bg.png";
import react_img from "./logo.svg";

function CustomLazyImage() {
  const [isLoaded, setIsLoaded] = useState(false);

  return (
    <div style={{ position: 'relative', width: '200px', height: '200px' }}>
      {/* 占位图加载完成前显示 */}
      {!isLoaded && (
        <img 
          src={react_img} 
          alt="placeholder" 
          style={{ width: '100%', height: '100%', objectFit: 'cover' }} 
        />
      )}
      {/* 主图加载完成前隐藏，加载完成后显示 */}
      <img
        src={bg}
        alt='stuff'
        style={{ 
          position: 'absolute', 
          top: 0, 
          left: 0, 
          width: '100%', 
          height: '100%',
          objectFit: 'cover',
          opacity: isLoaded ? 1 : 0,
          transition: 'opacity 0.3s ease'
        }}
        onLoad={() => setIsLoaded(true)}
      />
    </div>
  );
}

方法3：利用组件回调控制显示 #

使用组件的afterLoad回调，在主图加载完成后切换显示状态：

import { useState } from 'react';
import bg from "./img/bg.png";
import react_img from "./logo.svg";

function App() {
  const [imageLoaded, setImageLoaded] = useState(false);

  return (
    <div>
      {!imageLoaded ? (
        <img src={react_img} alt="placeholder" width="200" height="200" />
      ) : (
        <LazyLoadImage 
          src={bg}
          alt='stuff'
          height="200px"
          width="200px"
        />
      )}
      {/* 隐藏的懒加载图用于触发加载，加载完成后更新状态 */}
      <LazyLoadImage 
        src={bg}
        style={{ display: 'none' }}
        afterLoad={() => setImageLoaded(true)}
      />
    </div>
  );
}

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