Не показывать пустую страницу до загрузки всех изображений

236

15 ноября 2021, 00:50

У меня есть галерея изображений, в которой все изображения рендерятся очень грубо говоря вот по такому шаблону

import image1 from './images/image1';
    <...>    
    render(){
        return(
        
             <img src={image1} alt="" />
        );
    }

То есть изображения грузятся не с сервера, а просто из папки, через импорт. И проблема в том, что когда я перехожу в эту галерею, сначала вижу просто лейаут без этих картинок, потом они прогружаются секунды две и тогда все нормально. Мне нужно, чтобы пока они грузятся, страница не показывалась, а было видно какой-нибудь спиннер. Видел примеры, где его ставят, пока происходит фетч, но у меня его нет. Возможно ли такое? Или хотя бы как-то анимацию сделать, чтобы изображения появлялись постепенно с изменением прозрачности?

Как вообще это реализуется?

Answer 1

Если в общих чертах - вы можете воспользоваться onLoad & onError слушателями событий на теге <img /> для обработки окончания загрузки. Ниже вы можете увидеть примерный код для компонента, который работает таким образом

import React from "react";
class ImageWithStatusText extends React.Component {
  constructor(props) {
    super(props);
    this.state = { imageStatus: "loading" };
  }
  handleImageLoaded() {
    this.setState({ imageStatus: "loaded" });
  }
  handleImageErrored() {
    this.setState({ imageStatus: "failed to load" });
  }
  render() {
    return (
      <div>
        <img
          src={this.props.imageUrl}
          onLoad={this.handleImageLoaded.bind(this)}
          onError={this.handleImageErrored.bind(this)}
        />
        {this.state.imageStatus}
      </div>
    );
  }
}
export default ImageWithStatusText;