reactjs - 如何在加载内部图像之前暂停整个组件？

Question

我有以下组件: 在这个组件中，有一个图像。 当我加载页面时，我意识到页面将首先加载，然后图像将稍后加载。如何在加载图像之前暂停整个页面？ 我尝试使用后备方法将整个 div (id="container") 包装在 Suspense 组件中，但它似乎不适用于图像，而仅适用于组件。

如何在加载内部图像之前暂停整个组件？

import React from "react";
import resume from "../assets/Joe_Rogan_Resume.jpg";
import Banner from "./Banner";

const Resume = () => (
  <div id="container">
    <Banner styleclass="ResumePageBanner" h1text="My Resume" />
    <div className="resumePage">
      <div id="resume">
        <img src={resume} alt="Resume" />
      </div>
    </div>
  </div>
);

export default Resume;

Answer 1

React 16.x 中的 Suspense 组件仅允许您等待某些代码加载，而不是任何类型的数据(包括图像)。用于数据获取的 Suspense 仍处于实验阶段。因此，如果您不想使用不稳定的版本，则需要手动处理。

import React from "react";
import resume from "../assets/Joe_Rogan_Resume.jpg";
import Banner from "./Banner";

const Resume = () => {
  const [isImageLoaded, setIsImageLoaded] = React.useState(false);

  React.useEffect(() => {
    const image = new Image();
    image.onload = () => setIsImageLoaded(true);
    image.src = resume;

    return () => {
      image.onload = null;
    };
  }, []);

  if (!isImageLoaded) {
    return null;
  }

  return (
    <div id="container">
      <Banner styleclass="ResumePageBanner" h1text="My Resume" />
      <div className="resumePage">
        <div id="resume">
          <img src={resume} alt="Resume" />
        </div>
      </div>
    </div>
  );
}

export default Resume;