Как в React сделать прелоадер при загрузке большой фоновой картинки?

Question

[Валерий Любимов]

Есть маленькое приложение на реакте (одна страница). На фоне стоит картинка с большим разрешением (довольно жирная даже после оптимизаций). Как сделать так чтобы прелоадер показывался до тех пор пока все ресурсы на странице не загрузятся?

Пробовал играться с жизненными циклами в основном компоненте, но картинку он все равно не дожидается, даже если ее импортировать прямо в компонент

Comments

[yanis_kondakov]

https://www.javascriptstuff.com/detect-image-load/

Answer 1

[Pavel Kuzyakin]

вот довольно симпатичный костыль:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {

  // fake authentication Promise
  authenticate(){
    return new Promise(resolve => setTimeout(resolve, 2000))
  }

  componentDidMount(){
    this.authenticate().then(() => {
      const ele = document.getElementById('ipl-progress-indicator')
      if(ele){
        // fade out
        ele.classList.add('available')
        setTimeout(() => {
          // remove from DOM
          ele.outerHTML = ''
        }, 2000)
      }
    })
  }

  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default App;

https://github.com/nguyenbathanh/react-loading-scr...

Comments

[Валерий Любимов]

Не, ну это совсем плохо)

Answer 2

[Борис Черепанов]

Вот тут коротко описано. Вот ссылка "Анимированный preloader на ReactJS. "