如何隐藏Chrome浏览器显示的图片加载占位Sprite？

我给图片和视频做了自定义加载Spinner，但Chrome在图片加载过程中会显示一个小型默认图片占位符，和我的自定义Spinner重叠，效果很不雅观。我不想通过z-index把Spinner放在这个Chrome默认占位符上面，因为希望媒体加载完成后能直接显示在Spinner上方，从第一帧开始正常展示。请问如何用HTML/CSS禁用Chrome的这个默认图片Sprite？

原始代码 #

HTML #

<body>
    <div class="mediaWrapper isLoading">
          <img id="media" src="" />
      <div class="spinner"></div>
    </div>
    <script>
      setURLParams()
    </script>
</body>

JavaScript #

function setURLParams() {
    var params = new URLSearchParams(location.search);
    document.getElementById("media").setAttribute("src", params.get('file'));
}

解决方案 #

核心思路是初始隐藏图片元素，待加载完成后再显示，从根源上避免Chrome渲染默认占位符，同时通过加载状态类控制Spinner的显示/隐藏。

修改后的CSS #

.mediaWrapper {
  position: relative;
  /* 按需设置容器宽高，建议和目标媒体尺寸匹配 */
  width: 100%;
  max-width: 800px;
}

#media {
  display: none; /* 初始隐藏图片，阻止Chrome生成默认占位符 */
  width: 100%;
  height: auto;
}

.spinner {
  /* 自定义Spinner样式，示例如下 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* 加载完成后，隐藏Spinner并显示图片 */
.mediaWrapper:not(.isLoading) .spinner {
  display: none;
}

.mediaWrapper:not(.isLoading) #media {
  display: block;
}

@keyframes spin {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

修改后的JavaScript #

function setURLParams() {
  var params = new URLSearchParams(location.search);
  const mediaEl = document.getElementById("media");
  mediaEl.setAttribute("src", params.get('file'));

  // 监听图片加载完成事件，切换状态
  mediaEl.addEventListener('load', () => {
    document.querySelector('.mediaWrapper').classList.remove('isLoading');
  });

  // 处理加载失败场景，同样切换状态
  mediaEl.addEventListener('error', () => {
    document.querySelector('.mediaWrapper').classList.remove('isLoading');
    // 可在此添加错误提示逻辑，比如显示"加载失败"文本
  });
}

说明 #

• 初始状态下，img元素被设置为display: none，Chrome不会渲染它的默认占位符，自然不会和Spinner重叠
• 当图片加载完成（或加载失败），移除容器的isLoading类，此时自动隐藏Spinner并显示图片
• 如果是视频场景，只需将img替换为video，监听loadeddata事件即可实现相同逻辑

内容的提问来源于stack exchange，提问作者Fuego DeBassi