同构/通用反应中的图像onLoad事件 - 加载图像后注册事件 [英] Image onLoad event in isomorphic/universal react - register event after image is loaded

问题描述

在同构呈现的页面图像中，可以在主 script.js 文件之前下载。所以图像可以在反应之前加载注册 onLoad 事件 - 永远不会触发此事件。

In isomorphic rendered page image can be downloaded before main script.js file. So image can be already loaded before react register onLoad event - never trigger this event.

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

---

Scenario 1 - image.jpg is bigger than script.js

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

In this scenario everything is working fine. Event is registered before image is finally loaded so in console is image loaded message.

这个场景你可以看到在开头描述的问题帖子。 onLoad 未触发事件。

This scenario you can see problem described at the beginning of post. onLoad event is not triggered.

我该怎么做才能触发方案2 中的 onLoad 事件？

What can I do in order to trigger onLoad event in scenario 2?

检测是否有图像准备渲染你应该检查纯$ javascript img 对象的完成属性：

To detect if image is ready on render you should check complete property on pure javascript img object:

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} />
    );
}

推荐答案

你可以检查<$在应用 onload 事件之前，c $ c>完成属性。

You could check the complete property on the image before applying the onload event.

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

这篇关于同构/通用反应中的图像onLoad事件 - 加载图像后注册事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！