Material UI中CardMedia组件的图片懒加载实现方法问询

方法一：利用原生HTML img 标签的懒加载属性 #

你已经把 CardMedia 的 component 设置为 img，可以直接给组件添加原生的 loading="lazy" 属性，现代浏览器会自动处理图片懒加载逻辑，这是最简单的实现方式。

修改后的代码：

<CardMedia
    key={cardIndex}
    component="img"
    style={{objectFit: 'contain', height: props.height}}
    image={cardItem}
    loading="lazy"
/>

方法二：自定义Intersection Observer实现（适合复杂场景） #

如果需要更灵活的控制（比如自定义占位图、加载状态回调），可以用Intersection Observer API手动实现：

1. 先创建一个自定义懒加载图片组件：

import { useEffect, useRef, useState } from 'react';
import CardMedia from '@mui/material/CardMedia';

const LazyCardMedia = ({ image, ...props }) => {
  const [isVisible, setIsVisible] = useState(false);
  const mediaRef = useRef(null);

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setIsVisible(true);
          observer.unobserve(entry.target);
        }
      },
      { threshold: 0.1 }
    );

    mediaRef.current && observer.observe(mediaRef.current);

    return () => {
      mediaRef.current && observer.unobserve(mediaRef.current);
    };
  }, []);

  return (
    <CardMedia
      ref={mediaRef}
      component="img"
      style={{objectFit: 'contain', height: props.height}}
      image={isVisible ? image : ''}
      {...props}
    />
  );
};

2. 替换原有组件使用这个自定义组件：

<LazyCardMedia
    key={cardIndex}
    style={{objectFit: 'contain', height: props.height}}
    image={cardItem}
/>

方法三：结合占位图优化加载体验 #

如果想在图片加载前显示占位内容，可以给CardMedia设置背景色或者占位图片，提升用户体验：

<CardMedia
    key={cardIndex}
    component="img"
    style={{
      objectFit: 'contain', 
      height: props.height,
      backgroundColor: '#f0f0f0' // 占位背景色
    }}
    image={cardItem}
    loading="lazy"
    alt="Card content image"
/>

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