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

IT技术 javascript reactjs isomorphic-javascript
2021-05-14 00:27:45

在同构渲染页面图像可以在主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.jpg 比 script.js 大

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

场景 2 -image.jpg小于script.js

image.jpg 比 script.js 小

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

问题

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

编辑：Soviut 答案实现

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

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} />
    );
}
4个回答

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

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

另一种方法是使用 ref 并涵盖这两种情况：

<img
  ref={(input) => {
    // onLoad replacement for SSR
    if (!input) { return; }
    const img = input;

    const updateFunc = () => {
      this.setState({ loaded: true });
    };
    img.onload = updateFunc;
    if (img.complete) {
      updateFunc();
    }
  }}
  src={imgSrc}
  alt={imgAlt}
/>

使用 Hooks 这一切都变得更整洁了：


const useImageLoaded = () => {
  const [loaded, setLoaded] = useState(false)
  const ref = useRef()

  const onLoad = () => {
    setLoaded(true)
  }

  useEffect(() => {
    if (ref.current && ref.current.complete) {
      onLoad()
    }
  })

  return [ref, loaded, onLoad]
}

const SomeComponent = ({ src }) => {
  const [ref, loaded, onLoad] = useImageLoaded()

  return (
    <div>
      <img ref={ref} onLoad={onLoad} src={src} alt="" />
      {loaded && <h1>Loaded!</h1>}
    </div>
  )
}

即使 src 加载失败，img.complete 也是 true。

complete - 返回一个布尔值，如果浏览器已完成获取图像，无论成功与否。如果图像没有 src 值，它也会显示为真。

  1. 使用 naturalWidth 作为 img 加载是否成功的决定因素
    state = {
        isLoading: true,
        hasError: false,
    }

    myRef = React.createRef();

    componentDidMount() {
        const img = this.myRef.current;

        if (img && img.complete) {
            if (img.naturalWidth === 0) {
                this.handleOnError();
            } else {
                this.handleImageLoaded();
            }
        }
    }

    handleImageLoaded = () => {
        if (this.state.isLoading) {
            this.setState({ isLoading: false });
        }
    }

    handleOnError = () => {
        this.setState({ hasError: true });
    }

    render() {
        return (
            <img
                src={src}
                alt={alt}
                ref={this.myRef}
                onError={this.handleOnError}
                onLoad={this.handleOnLoad}
            />
        );
    }
  1. 另一种方法是在 componentDidMount 中添加“检查”图像，并为其设置一个事件处理程序，并让检查图像成为处理 eventListeners 的图像
componentDidMount() {
   const testImg = new Image();
   testImg.onerror = this.handleOnError;
   testImg.onload = this.handleImageLoaded;
   testImg.src = this.props.src; // important to set eventlisteners before src
}
其它你可能感兴趣的问题
上一篇如何实现打印零件的尺寸精度 下一篇你能把PLA零件放在你的车里（在阳光下）吗？