Фоновое изображение мерцает при изменении - реагирует - PullRequest
Новая
       95

Фоновое изображение мерцает при изменении - реагирует

1 голос
/ 03 мая 2020

Я переписывал свой веб-сайт ondeband.com - в настоящее время это веб-сайт WordPress, и у меня есть около месяца, чтобы написать его в ответ.

Я не собираюсь слишком сильно менять домашнюю страницу - она ​​имеет фоновое изображение, которое меняется каждые пару секунд. Вы можете увидеть это в моей ссылке выше.

Проблема в том, что ... на моей новой реагирующей версии веб-сайта - она ​​мигает между каждым изменением изображения - особенно, когда я нажимаю на геройку. На моем локальном dev-сервере он работает 99% времени.

У меня такое ощущение, что это происходит из-за "предварительной загрузки" изображений? Может быть, вы можете указать мне правильное направление - вот мой код для домашней страницы моего приложения.

Div с className для homePage - это место, где изображение bg загружается во встроенные стили. Переменная bgImage хранится в состоянии. Я использую хук 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;

Спасибо за помощь!

1 Ответ

0 голосов
/ 03 мая 2020

Вы можете сделать это всего лишь html, с небольшими изменениями в коде React.

Чтобы скачать изображение раньше, вы можете подписаться на этот ответ . Единственная проблема заключается в том, что вы не знаете URL-адрес изображения, потому что оно создается случайным образом после создания веб-сайта.

Чтобы уменьшить это, переместите изображения из папки src в папку public. Я полагаю, вы бы использовали /public/images/ для их хранения. Вот модифицированный код:

index. html

<head>
..
..
<link rel="preload" href="%PUBLIC_URL%/images/Banjo.jpg" as="image">
<link rel="preload" href="%PUBLIC_URL%/images/Hands.jpg" as="image">
<link rel="preload" href="%PUBLIC_URL%/images/Mic.jpg" as="image">
<link rel="preload" href="%PUBLIC_URL%/images/Sax.jpg" as="image">
...
</head>

Приложение. js

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 { Button } from 'reactstrap'

function App() {
  const [bgImgArray] = useState(['Banjo.jpg', 'Hands.jpg', 'Mic.jpg', 'Sax.jpg'])
  ...
  return (
    <div className="App h-100" style={{
      paddingTop: user ? '85px' : '0px'
    }}>
      <Router history={history}>
        ...
        <Switch>
          <Route path="/" exact >
            <div className='homePage h-100' style={{
              display: !isAuthenticated ? 'block' : 'none',
              backgroundImage: `url(/public/images/${bgImg})`,
              backgroundRepeat: 'no-repeat',
              backgroundSize: 'cover',
              webkitTransition: 'background-image 1s ease-in-out',
              transition: 'background-image 1s ease-in-out',
            }}>
              ...
            </div>
          </Route>
          ...
        </Switch>
      </Router>
    </div>
  );
}

export default App;
...