Тег img немного запаздывает, показывая изображение старой страницы на секунду или две, а затем показывая новое изображение в реакции - PullRequest
Новая
       30

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

0 голосов
/ 20 апреля 2020

На странице есть кнопки «Предыдущая» и «Следующая», которые позволяют перебирать страницы, отображая данные в строках карт, содержащих изображение. При первом нажатии кнопки «Вперед» в предыдущий раз текстовые поля отображаются мгновенно, но тег img немного отстает, показывая изображение старой страницы на секунду или две, а затем показывая новое изображение в реакции.

Любая идея, как я могу предотвратить это? Или, по крайней мере, заставить первое изображение немедленно исчезнуть?

1 Ответ

0 голосов
/ 20 апреля 2020

Судя по предоставленной вами информации, трудно поделиться решением, даже если мы его не увидим. Я могу предложить вам добавить к изображению загрузчик, чтобы он был намного удобнее для пользователя. Попробуйте следующее: 

 class LoadableImage extends Component {
  state = {
    isLoaded: false,
  };

  render() {
    let { path, alt, onLoad, ...rest } = this.props;
    return (
      <div className='position-relative h-100'>
        <img
          className='img-fluid p-3'
          src={ path }
          alt={ alt }
          { ...rest }
          onLoad={ this.handleImageLoad }
        />
        { !this.state.isLoaded && (
          <div className="loader-container">
            <span className="loader text-center">
              <div> Custom loader text or animation </div>
            </span>
          </div>
        )
        }
      </div>
    );
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    if (prevProps.path !== this.props.path) {
      this.setState({ isLoaded: false });
    }
  }

  /**
   * Handles the load of the image and executes any overriden onLoad functions if available.
   * @param {Event} e
   */
  handleImageLoad = (e) => {
    if (this.props.onLoad) {
      this.props.onLoad(e);
    }
    this.setState({
      isLoaded: true,
    });
  };
}

CSS: 

.loader-container {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.4);
  animation: fadeIn 0.3s ease-out;
  z-index: 110;
  overflow: hidden;
}


.loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #0083db;
}

Я использую Bootstrap 4 зависимости, но если вы этого не сделаете, вот тела классов: 

.position-relative {
  position: relative!important;
}

.h-100 {
  height: 100%!important;
}

.img-fluid {
  max-width: 100%;
  height: auto;
}

Использование: 

<LoadableImage path={'/image/path'} alt='Alternative text' />

Вы также можете добавить пользовательские параметры в тег <img>. Не стесняйтесь сделать свой собственный дизайн погрузчика.

...