Page slow down after view the content many times

[Witchayanin]

I found that after view the content many times the page will significant slow down and type the input will be delay.

Reproduce step:

1. Go to URL https://hallysonh.github.io/ngx-imageviewer/basic-usage
2. Switch tab between PDF test, Image1 and Image2 around 20-30 times.
3. Page will significant slow down and when type the input will be delay.

[marmik18]

Facing the same issue

[JulindM]

Fixed in my fork of the project, commit https://github.com/Softec-Open-Source-Division/ngx-imageviewer/commit/3caab5013509248574083539b78023d7efc80c99

[jerbob92]

The correct fix for this is storing the handle that requestAnimationFrame returns and making sure to call cancelAnimationFrame on it when render() is called to make sure every image has only one image render loop. You should then also call cancelAnimationFrame in the onDestroy, like this:

  private animationFrameHandle: number;

  private render() {
    if (this.animationFrameHandle) {
      cancelAnimationFrame(this.animationFrameHandle);
      this.animationFrameHandle = null;
    }

    this.renderFrame();
  }
  
  private renderFrame() {
    // ... Existing render code here ...
    this.animationFrameHandle = requestAnimationFrame(() => this.renderFrame());
  }

  ngOnDestroy() {
    // ... Existing destroy code here ...

    // Stop animation frame when image viewer is destroyed.
    if (this.animationFrameHandle) {
      cancelAnimationFrame(this.animationFrameHandle);
      this.animationFrameHandle = null;
    }
  }