2

我有以下组件：在这个组件中，有一个图像。当我加载页面时，我意识到将首先加载页面，然后再加载图像。如何在加载图像之前暂停整个页面？我曾尝试使用后备方法将整个 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;
4

1 回答 1

2

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;
于 2020-06-24T23:10:26.970 回答