在预加载页面呈现之前立即显示网站主页

编程问答 2022-05-28

问题描述

我从 React 创建了一个网站。最近我为我的网站实现了一个预加载页面。但问题是在预加载页面呈现之前立即显示网站主页。我如何解决这个问题？显示下面的加载器组件和 app.js 文件。我正在为 Loader 组件使用 Lottie 包。

加载器组件

import React from "react"
import Lottie from "react-lottie"
import * as loading from "../../assets/paperplane.json"
import "./Loader.css"

const defaultOptions = {
  loop: true,autoplay: true,animationData: loading.default,rendererSettings: {
    preserveAspectRatio: "xMidYMid slice",},}

const Loader = () => {
  return (
    <div className="loader">
      <div className="active">
        <Lottie options={defaultOptions} height={400} width={400} />
      </div>
    </div>
  )
}

export default Loader

App.js

import React,{ useState,useEffect } from "react"
import { browserRouter,Route,Switch } from "react-router-dom"
import Header from "./components/header/Header"
import Loader from "./components/loader/Loader"
import Home from "./screens/Home/Home"
import Works from "./screens/Works/Works"
import About from "./screens/About/About"
import Contact from "./screens/Contact/Contact"
import WebProjects from "./screens/WebProjects/WebProjects"
import DesignProjects from "./screens/DesignProjects/DesignProjects"

function App() {
  const [loading,setLoading] = useState(false)

  useEffect(() => {
    setLoading(true)
    setTimeout(() => {
      setLoading(false)
    },5000)
  },[])
  return (
    <>
      {loading ? (
        <Loader loading={loading} />
      ) : (
        <browserRouter>
          <Header />
          <main>
            <Switch>
              <Route path="/" component={Home} exact />
              <Route path="/about" component={About} />
              <Route path="/works/web-projects" component={WebProjects} />
              <Route
                path="/works/designs-projects"
                component={DesignProjects}
              />
              <Route path="/works" component={Works} />
              <Route path="/contact" component={Contact} />
            </Switch>
          </main>
        </browserRouter>
      )}
    </>
  )
}

export default App

解决方法

如果我理解正确，你只需要改变这一行

  new THREE.CubeTextureLoader().load(
          imageUrlList,(cubeTexture) => {
            console.log('cubeTexture 222',cubeTexture)
            scene.environment = cubeTexture
            // scene.background = cubeTexture
            model.traverse(function (item) {
              if (item.isMesh) {
                item.material.envMap = cubeTexture
              }
            })
            console.log('model',model)
          }

因为无论如何你都需要首先显示加载器。

我想你也可以先删除 const [loading,setLoading] = useState(true) // instead of false 

selsetLoading
domjavascriptlottielottiepreloaderreactjsreactjsreactjsreactjs