Lasy Image Loading

LasyImage.jsx

class LazyImage extends PureComponent {
  static defaultProps = {
    engage: false,
  };

  state = {
    initialEngage: false,
  };

  componentWillMount() {
    if (this.props.engage) {
      this.setState({ initialEngage: true });
    }
  }

  componentWillReceiveProps(nextProps) {
    const { engage } = this.props;
    const { initialEngage } = this.state;

    if (!engage && nextProps.engage && !initialEngage) {
      this.setState({ initialEngage: true });
    }
  }

  render() {
    const {
      preview,
      src,
      srcSet,
      media,
      children,
      alt,
      height,
      width,
      id,
      className,
      webp,
      webpMedia,
    } = this.props;
    const { initialEngage } = this.state;

    return (
      <picture>
        {webp &&
          initialEngage && (
            <source srcSet={webp} media={webpMedia} type="image/webp" />
          )}
        {srcSet && initialEngage && <source srcSet={srcSet} media={media} />}
        {children && initialEngage && children}
        <img
          height={height}
          width={width}
          id={id}
          className={className}
          alt={alt}
          srcSet={initialEngage ? srcSet : undefined}
          sizes={initialEngage ? media : undefined}
          src={initialEngage ? src : preview}
        />
      </picture>
    );
  }
}