javascript - 隐藏一个 div，直到该 div 内的图像从 YouTube 加载

Question

我使用 lightGallery 创建了一个图片库。我用它来显示 YouTube 视频和图像。
对于 YouTube 视频缩略图，我使用:afterCSS 为<a>代码中的标签添加了播放按钮的图像。
我遇到了一个问题，当页面加载 YouTube 视频缩略图和图像缩略图时加载速度很慢，播放按钮在缩略图之前加载。
它导致设计问题并且看起来不太好。
缩略图完全加载后如何显示播放按钮图像？

HTML：

<div class="project-item Pre-weddingPhotoshoot">
  <div class="thumb video-thumb">
    <a class="img-wrap1" href="https://www.youtube.com/watch?v=VQdjtCNhlCg">
      <img src="https://img.youtube.com/vi/VQdjtCNhlCg/hqdefault.jpg" 
           alt="Pre-wedding Photoshoot" class="lazy"/>
    </a>
  </div>
</div>

jQuery：

$('#lightbox-image-gallery-Pre-weddingPhotoshoot').lightGallery({
    download: false,
    share: false,
    rotate: false,
    zoom: true,
    scale: 0.5,
    hash: false,
    selector: 'a' 
});

CSS：

.projects-list .project-item .video-thumb:after {
    content: '';
    position: absolute;
    right: 5px;
    bottom: 5px;
    background-image: url(../images/video.png) !important;
    height: 24px;
    width: 34px;
}

截屏