Question

我所谈论的一个例子是：https://detrum-replication.herokuapp.com/

点击左下角的悬停钻石时可以看到我的问题。我根据状态中的值有条件地渲染渐变和背景。它只是从1-4循环并根据状态的数量改变div的类。我唯一不喜欢的是点击钻石时的瞬间闪光。一旦图像被加载并循环通过它不再闪烁，所以我假设图像已被缓存。有没有办法使用React预先处理我将用于背景的图像？我是否以错误的方式解决这个问题以实现我想做的事情？我试过用React的几个传感器没有运气。我的一些代码如下：

constructor(props) {
    super(props);

    this.state = {
        bg: 1
    }
}

changeSeason = () => {
        let current = this.state.bg;

        if (current >= 4){
            current = 1;
        } else {
            current++;
        }

        this.setState(() => ({bg : current}));
        localStorage.setItem("bg", current);
};
render() {
    return (
        <div className={`gradient${this.state.bg}`}>
            <div className={`background${this.state.bg}`}></div>
            <div className="diamond" onClick={this.changeSeason}><div className="diamond__shadow-bottom"></div><div className="diamond__shadow-right"></div></div>
        </div>
    )
}

感谢您抽出宝贵时间帮助我。

Answer 1

当您确定自己需要时，可以在应用上预加载资源。浏览器不会等待你的javascript / css解析并知道你需要它们，从而防止闪烁。

您需要将它们添加到 index.html ，就像这样

<link rel="preload" href="bg-image.png" as="image">

查看MDN文档以供参考

通过状态更改时背景图像闪烁

1 个答案: