如何解决在预加载页面呈现之前立即显示网站主页
我从 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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。