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

【问题标题】：Is there a way to delay a spring until the image has loaded?有没有办法延迟弹簧直到图像加载？
【发布时间】：2020-05-29 03:14:42
【问题描述】：

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

谢谢

【问题讨论】：

标签： javascript css reactjs jsx react-spring

【解决方案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>

【讨论】：