如何隱藏播放按鈕，直到圖像加載在JavaScript中

Question

我需要隱藏播放按鈕圖像，直到加載視頻縮略圖。

<img
  src={
    //video thumbnail image is coming from api results.
    media &&
    getShapedImage(
      media[0].thumb ? media[0].thumb.url : media[0].url,
      imageSize.large,
      null,
      fileFormat.jpgFormat
    )
  }
  alt="single image"
  className="single-image-width"
/>
{
  media[0].thumb && (
    <div className="play-btn">
      <img src={PlayBtnImage} className="mobile-width" /> //video play button
      image is here
    </div>
  );
}

Answer 1

您可以嘗試使用onLoad圖像事件並使用狀態來管理按鈕的顯示。

<img
  src={
    //video thumbnail image is coming from api results.
    media &&
    getShapedImage(
      media[0].thumb ? media[0].thumb.url : media[0].url,
      imageSize.large,
      null,
      fileFormat.jpgFormat
    )
  }
  // Add this here.
  onLoad={e => {
    if (e.target.complete) {
      this.setState({
        imgLoaded: true
      });
    }
  }}
  alt="single image"
  className="single-image-width"
/>;
{
  // Update here.
  media[0].thumb && this.state.imgLoaded && (
    <div className="play-btn">
      <img src={PlayBtnImage} className="mobile-width" /> //video play button
      image is here
    </div>
  );
}