Question

我试图通过反应做一些非常基本的事情。我的图像有一个src URL，这是一个非常大的图像（9999x9999~2.5mb）。

我正在渲染一个Loading组件和图像（带有src）。图像上有一个可见性：隐藏的样式。

当在图像上调用onLoad时，我会更新var in状态，这将隐藏加载组件，并更改图像的可见性。

这一切都按预期工作，但是onload似乎在图像显示前大约1 / 1.5秒被调用。我看到加载微调器短暂旋转，然后在加载器正确消失并且图像渲染之前，它会与整个应用程序一起冻结1 / 1.5秒。当我更新状态时，请检查＆＃39;已完成＆＃39;在图像上，它重新渲染应用程序。然后我冻结了。

您可以在此处查看此行为：GIF

代码：

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Loading from '../../../components/Loading';

function generateSizeStyle(size) {
  if (!size) { return {}; }

  return { width: size, height: size };
}

function getHiddenStyle({ imageLoaded }) {
  return imageLoaded ? void 0 : { visibility: 'hidden' };
}

export default class Image extends Component {
  constructor(props) {
    super(props);

    this.state = {
      imageLoaded: false
    };

    this.setImageLoaded = this.setImageLoaded.bind(this);
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.data !== this.props.data || nextProps.path !== this.props.path) {
      this.setState({ imageLoaded: false });
    }
  }

  getImageStyle() {
    const { size } = this.props;
    const { imageLoaded } = this.state;

    return { ...generateSizeStyle(size), ...getHiddenStyle({ imageLoaded }) };
  }

  setImageLoaded() {
    this.setState({ imageLoaded: true });
    console.log(document.getElementById('img'));
  }

  render() {
    const { data, alt, imageType, path } = this.props;

    if (!data && !path) { return null; }

    const { imageLoaded } = this.state;

    return (
      <div className={`image ${imageType}`}>
        {!imageLoaded ? <Loading /> : null}
        <img
          id="img"
          onLoad={this.setImageLoaded}
          src={data || path}
          alt={alt}
          style={this.getImageStyle()}
        />
      </div>
    );
  }
}

Image.propTypes = {
  data: PropTypes.string,
  alt: PropTypes.string,
  size: PropTypes.number,
  path: PropTypes.string,
  imageType: PropTypes.string.isRequired
};

Image.defaultProps = {
  data: void 0,
  alt: '',
  size: void 0,
  path: void 0
};

有什么想法吗？

此致亚历

在React中完全呈现图像之前调用图像onLoad回调

0 个答案: