当前位置：首页 > React

react懒加载如何放默认图

2026-01-26 00:03:39React

实现React懒加载时设置默认图的方法

在React中实现懒加载（Lazy Loading）时，可以通过以下方式设置默认占位图，优化用户体验并避免布局偏移。

使用`loading`属性与`onError`事件

对于原生<img>标签，可直接通过loading="lazy"启用懒加载，并配合onError事件回退到默认图：

react懒加载如何放默认图

<img
  src="实际图片URL"
  loading="lazy"
  onError={(e) => {
    e.target.src = "默认图URL";
    e.target.onerror = null; // 防止循环报错
  }}
  alt="描述文字"
/>

结合`Intersection Observer`自定义懒加载

通过Intersection Observer API监听元素可见性，动态加载图片：

react懒加载如何放默认图

import { useRef, useEffect, useState } from 'react';

function LazyImage({ src, alt, placeholder }) {
  const imgRef = useRef();
  const [isLoaded, setIsLoaded] = useState(false);

  useEffect(() => {
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting && !isLoaded) {
          const img = new Image();
          img.src = src;
          img.onload = () => setIsLoaded(true);
          img.onerror = () => setIsLoaded(false); // 加载失败保持占位图
          observer.unobserve(entry.target);
        }
      });
    });

    if (imgRef.current) observer.observe(imgRef.current);
    return () => observer.disconnect();
  }, [src, isLoaded]);

  return (
    <img
      ref={imgRef}
      src={isLoaded ? src : placeholder}
      alt={alt}
      onError={(e) => {
        e.target.src = placeholder;
        e.target.onerror = null;
      }}
    />
  );
}

使用第三方库（如`react-lazy-load-image-component`）

通过库提供的<LazyLoadImage>组件快速实现：

import { LazyLoadImage } from 'react-lazy-load-image-component';
import 'react-lazy-load-image-component/src/effects/blur.css';

function MyComponent() {
  return (
    <LazyLoadImage
      src="实际图片URL"
      placeholderSrc="默认图URL"
      effect="blur" // 可选模糊过渡效果
      onError={(e) => {
        e.target.src = "默认图URL";
      }}
    />
  );
}

CSS背景图懒加载方案

对于CSS背景图，可通过动态类名控制：

function LazyDiv({ imageUrl, placeholder }) {
  const [loaded, setLoaded] = useState(false);

  useEffect(() => {
    const img = new Image();
    img.src = imageUrl;
    img.onload = () => setLoaded(true);
    img.onerror = () => setLoaded(false);
  }, [imageUrl]);

  return (
    <div 
      className={`lazy-bg ${loaded ? 'loaded' : ''}`}
      style={{ 
        backgroundImage: loaded ? `url(${imageUrl})` : `url(${placeholder})` 
      }}
    />
  );
}