如何实现手机图片在Video加载前完成加载并显示？

方法1：资源预加载（最直接有效） #

在页面<head>标签中添加预加载指令，强制浏览器优先加载手机背景图：

<link rel="preload" as="image" href="https://www5.cadence.com/rs/070-BII-206/images/phone-mobile-blk-300.jpg">

这个标签会告知浏览器该图片属于页面关键资源，需要优先于视频脚本、视频封面等非关键资源加载完成。

方法2：调整DOM结构，实现先显示手机图再替换 #

将手机图片作为独立覆盖层放在视频容器上方，等视频加载完成后再隐藏，确保用户第一眼看到的是手机图：

1. 修改HTML结构：

<div class="phone-wrapper">
  <!-- 手机图覆盖层 -->
  <div class="phone-overlay"></div>
  <img
    style="width: 100%; margin: auto; display: block; max-width: 300px;"
    class="vidyard-player-embed"
    src="https://play.vidyard.com/6UxbuQNxGx11T1igjQ16E3.jpg"
    data-uuid="6UxbuQNxGx11T1igjQ16E3"
    data-v="4"
    data-type="inline"
    data-width="300"
  />
</div>

2. 更新CSS样式：

div.phone-wrapper {
  position: relative;
  padding-top: 25px;
  padding-bottom: 67.5%;
  height: 0;
}

/* 手机图覆盖层样式 */
div.phone-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(https://www5.cadence.com/rs/070-BII-206/images/phone-mobile-blk-300.jpg) center center no-repeat;
  background-size: contain;
  z-index: 10;
}

div.phone-wrapper iframe {
  box-sizing: border-box;
  padding: 11.9% 15.5% 14.8%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

3. 添加视频加载完成监听脚本：

// 监听Vidyard播放器加载完成事件
document.addEventListener('vidyard-player-ready', function(e) {
  if (e.detail.uuid === '6UxbuQNxGx11T1igjQ16E3') {
    document.querySelector('.phone-overlay').style.display = 'none';
  }
});

手机图会先渲染在最上层，等视频播放器完全加载后自动隐藏，保证视觉上的加载顺序符合需求。

方法3：优化现有CSS加载优先级 #

如果不想修改DOM结构，可以调整iframe背景图的加载优先级，通过!important强制浏览器优先处理（不推荐过度使用，但此处可快速生效）：

div.phone-wrapper iframe {
  box-sizing: border-box;
  background: url(https://www5.cadence.com/rs/070-BII-206/images/phone-mobile-blk-300.jpg) center center no-repeat !important;
  background-size: contain !important;
  padding: 11.9% 15.5% 14.8%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

推荐优先采用方法1+方法2的组合，既能保证图片加载优先级，又能通过覆盖层确保视觉呈现顺序。

内容的提问来源于stack exchange，提问作者Debra Barba