同构/通用反应中的图像onLoad事件-加载图像后注册事件

Question

在同构渲染页面中，可以在下载主script.js文件之前下载图像。因此，可以在react注册onLoad事件之前加载图像-切勿触发此事件。

script.js

constructor(props) {
    super(props);
    this.handleImageLoaded = this.handleImageLoaded.bind(this);
}

handleImageLoaded() {
    console.log('image loaded');
}

render() {
    return (
        <img src='image.jpg' onLoad={this.handleImageLoaded} />
    );
}

方案1- image.jpg大于script.js

在这种情况下，一切正常。在图像最终加载之前注册了事件，因此控制台中image loaded显示消息。

方案2- image.jpg小于script.js

这种情况下，您可以在文章开头看到问题。onLoad事件未触发。

题

onLoad在 方案2中 触发事件该怎么办？

编辑：苏联答案实现

要检测渲染是否准备好图像，您应该检查complete纯javascript img对象的属性：

constructor(props) {
    super(props);
    this.state = { loaded: false };
    this.handleImageLoaded = this.handleImageLoaded.bind(this);
    this.image = React.createRef();
}

componentDidMount() {
    const img = this.image.current;
    if (img && img.complete) {
        this.handleImageLoaded();
    }
}

handleImageLoaded() {
    if (!this.state.loaded) {
        console.log('image loaded');
        this.setState({ loaded: true });
    }
}

render() {
    return (
        <img src='image.jpg' ref={this.image} onLoad={this.handleImageLoaded} />
    );
}

Answer 1

您可以complete在应用onload事件之前检查图像上的属性。

if (!img.complete) {
    // add onload listener here
}