weixin_45507418
ʚ ylf ɞ
2021-01-23 05:08

预加载react antd图片

20
  • react.js
  • chrome

我有一些antd的图片需要预加载:

import {Image} from "antd";

class Unit extends React.Component {
    render() {
        return (
            <div>
                ......
                <Image src={this.props.src1}/>
                <Image src={this.props.src2}/>,
                ......
            </div>
        )
    }
}

我发现只有当上层组件中的render方法调用Unit组件时, 图片才会加载 (不是100%确定). 怎样在上层组件的构造方法初始化子组件时, 就让图片开始加载? 比如:

class Parent extends React.Component {

    constructor(props) {
        super(props);
        this.unit = <Unit src1={'...'} src2={'...'}/> // <== Can I load the images here?
    }

    render() {
        if (this.state.some_status) 
            return (
                    this.unit // <== therefore images are already loaded and show quickly
            );
        else 
            ......
    }
}

 

  • 点赞
  • 收藏
  • 复制链接分享

1条回答

为你推荐

换一换