有没有办法延迟弹簧直到图像加载？

Question

我正在使用react-spring和 render-props API 来设置背景大小的 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>

谢谢

Answer 1

我有一个你可以在这里使用的想法。 对于 img 组件，有一个 onLoad 事件处理程序。 如果您在页面上的某处显示具有相同 src 隐藏的图像。 然后您可以设置图像最终加载时的状态。

然后使用此状态更改 Spring 组件的 to 属性。 像这样的东西：

<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>