Question

我的服务器有点慢，当显示较小尺寸的图像时，您可以看到它们正在屏幕上加载，我希望立即显示它们。

非常感谢我有一个登录页面，按下按钮后，该页面便重定向到包含图像的主页。

此路由是在我的app.js中控制的，就像根文件一样。该文件路由到登录页面和主页。我以为我可以将图像加载到那里，然后将它们作为道具通过路由器传递到主页：

import projectImage1 from './assets/1.png';
import projectImage2 from './assets/2.png';
import projectImage3 from './assets/3.png';

class App extends Component {
  render() {
    return (
      <Route render={({location}) => (
        <TransitionGroup>
        <CSSTransition
          key={location.pathname === '/' ? location.key : null} // Use transition only if on landing page
          timeout={800}
          classNames="fade"
        >
          <Switch location={location}>
            <Route path="/" exact component={Landingpage} />
            <Route path="/app/:name" exact render={(props) => <MainApp
              projectImage1={projectImage1}
              projectImage2={projectImage2}
              projectImage3={projectImage3}
            />} />
          </Switch>
        </CSSTransition>
      </TransitionGroup>
      )} />


    );
  }
}

您可以看到我的MainApp.js收到了3张图片作为道具。从技术上讲，这是没有错误的，但是我仍然在屏幕上看到正在加载的图像。为什么会这样呢？如何预先加载它们以使其流畅显示？

谢谢

Answer 1

默认情况下，浏览器不会在需要之前加载资源。对于图像，这是图像本身可见的时间。这是由于性能，但是有一种方法可以让您预先加载这些图像。

如果您在componentDidMount组件的App生命周期方法中执行此操作，浏览器将加载图像：

class App extends Component {
  componentDidMount() {
    const imagesToBePreloaded = [projectImage1, projectImage2, projectImage3]
    imagesToBePreloaded.forEach(image => { new Image().src = image })
  }

  render() {
    // [...] Removed for abbreviation.
  }
}

反应：预先加载图片

1 个答案: