Есть ли способ отложить пружину до загрузки изображения? - PullRequest
Новая
       23

Есть ли способ отложить пружину до загрузки изображения?

0 голосов
/ 13 февраля 2020

Я использую react-spring с API render-props для установки свойства background-size CSS. Изменение срабатывает при изменении фонового изображения. Дело в том, что фоновое изображение не всегда загружается достаточно быстро, чтобы размер фона изменялся без ошибок.

Есть ли способ отложить Spring до загрузки фонового изображения, или мне нужно предварительно загрузить все мои фоновые изображения заранее?

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

Вот мой код: 

<Spring native
    from={{backgroundSize: "105%", backgroundImage: streamRectangleBackground}}
    to={{backgroundSize: "101%", backgroundImage: streamRectangleBackground}}
    reset={this.shouldResetAnimation(streamRectangleBackground)}>
    {props =>
        <animated.div className={"streamRectangle"} style={props}>
            <Timer timerSetup={this.state.timerSetup}/>
        </animated.div>
    }
</Spring>

Спасибо

1 Ответ

1 голос
/ 13 февраля 2020

У меня есть идея, которую вы можете использовать здесь. Для компонентов img есть обработчик события onLoad. Если вы отображаете изображение с таким же sr c, спрятанным где-то на странице. Затем вы можете установить состояние после окончательной загрузки изображения.

Затем используйте это состояние, чтобы изменить свойство to компонента Spring. Как то так: 

<img
  style={{display: 'none'}}
  src={streamRectangleBackground}
  onLoad={() => this.setState({loaded: true})}
/>

<Spring native
    from={{backgroundSize: "105%", backgroundImage: streamRectangleBackground}}
    to={{backgroundSize: ${this.state.loaded ? "101%" : "105%"}}}
    reset={this.shouldResetAnimation(streamRectangleBackground)}>
    {props =>
        <animated.div className={"streamRectangle"} style={props}>
            <Timer timerSetup={this.state.timerSetup}/>
        </animated.div>
    }
</Spring>
...