Javascript 当异步调用触发时，svg微调器图标冻结

我在我的应用程序上的react for buttons中创建了一个包装器组件，在我的地图上加载东西时，它会在按钮上添加一个svg加载微调器，以便向用户提供一点反馈。在使用mobile safari/chrome时，我注意到，当我触发多个服务调用时，svg微调器往往会冻结，我正试图找出如何解决这个问题

所以我的按钮看起来像这样-

  constructor(props) {
    super(props);

    this.checkIfDisabled = this.checkIfDisabled.bind(this);
    this.renderButtonInner = this.renderButtonInner.bind(this);
  }

  checkIfDisabled() {
    if (this.props.isLoading) {
      return true;
    } else if (this.props.disabled === true) {
      return true;
    }
    return false;
  }

  renderButtonInner() {
    if (this.props.isLoading) {
      return (
        <div>
          <span className="button-loader"></span> {this.props.children}
        </div>
      );
    }
    return this.props.children;
  }

  render() {
    return (
      <button
        className={`LoadingButton ${this.props.styleClasses}`}
        onClick={this.props.onClick}
        disabled={this.checkIfDisabled()}
        type={this.props.type || 'button' }
        >
        {this.renderButtonInner()}
      </button>
    );
  }

 <LoadingButton
      isLoading={bool to tell if button is in loading state}
      styleClasses="my custom classes here"
      onClick={click callback here}
      >
       Button!
  </LoadingButton>

我一直在这样使用这个组件-

  constructor(props) {
    super(props);

    this.checkIfDisabled = this.checkIfDisabled.bind(this);
    this.renderButtonInner = this.renderButtonInner.bind(this);
  }

  checkIfDisabled() {
    if (this.props.isLoading) {
      return true;
    } else if (this.props.disabled === true) {
      return true;
    }
    return false;
  }

  renderButtonInner() {
    if (this.props.isLoading) {
      return (
        <div>
          <span className="button-loader"></span> {this.props.children}
        </div>
      );
    }
    return this.props.children;
  }

  render() {
    return (
      <button
        className={`LoadingButton ${this.props.styleClasses}`}
        onClick={this.props.onClick}
        disabled={this.checkIfDisabled()}
        type={this.props.type || 'button' }
        >
        {this.renderButtonInner()}
      </button>
    );
  }

 <LoadingButton
      isLoading={bool to tell if button is in loading state}
      styleClasses="my custom classes here"
      onClick={click callback here}
      >
       Button!
  </LoadingButton>

按钮

---

它在桌面上工作得很好，但我注意到在移动设备上，当异步调用被激发到我的后端时，微调器会冻结。我不确定我还应该做些什么来解决这个问题-也许我不应该使用svg作为背景图像？有没有更好的方法来添加此微调器以防止其冻结？谢谢你的阅读

您是否尝试在

中添加带有

标记的svg？@Alexis否-我将试一试！那有助于降温呢？这只是个主意。我不知道原因是什么，但我可以帮你找到另一个解决方案：-pIs是在全手机浏览器上冻结还是只有1个？可能使用的浏览器是cause@Alexismobile safari，iphone 5和6上的mobile chrome，我正在尝试按照您的建议实施img。也许更直接的参考会有所帮助。