Question

我正在使用fabricjs渲染复杂的画布。它需要几秒钟，大约3 + - 。有没有办法立即渲染这个页面而不等待渲染，并显示一些加载图像，直到画布可以立即显示？

我父母的组成部分 -

class GraphPage extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            loaded: false,
            print: null
        }
    }

    render(){
        console.log('render');
        const graphList = graphStore.getGraphValue();
        var {data} = this.props;
        return(
            <div>
                <div className="inputs">
                    <Inputs modal={false} unit='%' list={graphList.rotation} descTitle={data.graph.machine}/>
                    <Inputs modal={false} unit='mm' list={graphList.machine} descTitle={data.graph.rotation}/>
                </div>
                <div className="graph">
                    <Print />
                </div>

            </div>
        )
    }
}

Print是我的画布组件。

Answer 1

如果print是结构JS组件，我会将onLoaded回调传递给它，然后当fabric.Image对象完成加载时，您可以调用该函数并设置{{1这个组件的状态。然后，此函数可以根据该状态呈现不同的内容。

Reactjs - 单击链接后立即显示加载图像，直到子项未完全呈现

1 个答案: