【发布时间】：2020-08-17 22:16:34
【问题描述】：
我一直在重写我的网站 ondeband.com - 它目前是一个 wordpress 网站，我大约有一个月的时间来编写它以响应。
我不会过多地更改主页 - 它的背景图片每隔几秒钟就会更改一次。你可以在我上面的链接中看到它。
问题是...在我的网站的新反应版本上 - 它在每次图像更改之间闪烁 - 特别是当我将它推送到 heroku 时。它 99% 的时间都在我的本地开发服务器上运行。
我有一种感觉是因为图像的“预加载”？也许您可以为我指明正确的方向 - 这是我的应用程序主页的代码。
className 为 'homePage' 的 div 是将 bg 图像加载到内联样式中的位置。变量 bgImage 存储在 state 中。我使用 useEffect 挂钩来启动函数“bgTransition”，它会随机更改每个图像。
import React, { useState, useEffect } from "react";
import NavBarA from "./components/NavBarA";
import { Router, Route, Switch } from "react-router-dom";
import BookABand2 from "./components/Profile/BookABand2";
import LiveProfile from './components/BookABand/LiveProfile'
import Account from './components/Account/Account'
import history from "./uitls/history";
import PrivateRoute from "./components/PrivateRoute";
import 'bootstrap/dist/css/bootstrap.min.css';
import AqgSetup3 from "./components/AqgSetup3";
import './App.css';
import { useAuth0 } from './react-auth0-spa'
import Banjo from './BackgroundImgs/Banjo.jpg'
import Hands from './BackgroundImgs/Hands.jpg'
import Mic from './BackgroundImgs/Mic.jpg'
import Sax from './BackgroundImgs/Sax.jpg'
import { Button } from 'reactstrap'
function App() {
const { user } = useAuth0()
const [bgImgArray] = useState([Banjo, Hands, Mic, Sax])
const [ bgImg, setBgImg ] = useState(Banjo)
const { loginWithRedirect, isAuthenticated } = useAuth0();
useEffect(() => {
bgTransition()
}, [] )
const bgTransition = () => {
let newNum = Math.floor(Math.random() * 4)
setBgImg(bgImgArray[newNum])
setTimeout(() => {
bgTransition()
}, 5000)
}
if(!bgImgArray){
return <div>loading...</div>
}
return (
<div className="App h-100" style={{
paddingTop: user ? '85px' : '0px'
}}>
<Router history={history}>
<header>
<NavBarA color={ user ? 'light' : ''} className={user ? 'navbar text-dark fixed-top shadow-lg' : "navbar text-light fixed-top"}/>
</header>
<Switch>
<Route path="/" exact >
<div className='homePage h-100' style={{
display: !isAuthenticated ? 'block' : 'none',
backgroundImage: `url(${bgImg})`,
backgroundRepeat: 'no-repeat',
backgroundSize: 'cover',
webkitTransition: 'background-image 1s ease-in-out',
transition: 'background-image 1s ease-in-out',
}}>
<div className='h-100 w-100 position-absolute'style={{
background: 'linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) )',
zIndex: '10'
}}/>
<div className="d-flex flex-column w-100 h-100 align-items-center justify-content-center position-relative" style={{zIndex: '100'}}>
<h1 className='text-light'>On Demand</h1>
<h1 className='text-light'>On DeBand</h1>
<h6 className='text-light'>Find, Support, and Book Local Bands</h6>
<div className='d-flex flex-row'>
<Button outline color='light' size='lg' className='mx-2 my-2' onClick={() => {loginWithRedirect()}}>Find Bands</Button>
</div>
</div>
<div>
</div>
</div>
<div style={{
display: user ? 'block' : 'none',
}}>
<BookABand2 />
</div>
</Route>
<PrivateRoute path="/BookABand2" component={BookABand2} />
<PrivateRoute path="/AqgSetup3/:id" component={AqgSetup3} />
<PrivateRoute path="/band/:id" component={LiveProfile} />
<PrivateRoute path="/account" component={Account} />
</Switch>
</Router>
</div>
);
}
export default App;
感谢您的帮助！
【问题讨论】：
标签： javascript html reactjs background-image inline-styles