PhotoSphereViewer如何配置showLoader显示图片替代默认加载文本

两种可直接落地的方案，根据需求选择即可： #

方案1：CSS覆盖默认样式（零额外JS逻辑，推荐） #

不需要改动现有业务逻辑，只要加一段CSS就能实现，适配初始化加载、setPanorama切换全景全场景：

• 保持原有初始化配置里的showLoader属性为true，保证加载层容器正常渲染
• 加入以下全局CSS，替换默认加载内容：

/* 隐藏默认加载器自带的文字、旋转动画 */
.psv-loader span,
.psv-loader::before {
  display: none !important;
}
/* 给加载层设置自定义加载图 */
.psv-loader {
  background: url('你的自定义加载图片存放路径') center center no-repeat;
  background-size: 120px auto; /* 按你需要的加载图尺寸调整 */
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.8); /* 如需修改加载层背景色可加这行 */
}

方案2：事件控制自定义加载层（适合复杂交互场景） #

如果你需要在加载阶段加进度条、提示文字等更复杂的内容，可以关掉默认加载器，自己通过组件事件控制加载层显隐：

• 初始化组件时将showLoader设为false，关闭默认加载层
• 在全景容器内提前放入自定义加载图片元素
• 绑定组件加载相关事件，控制自定义图片的显示/隐藏：

// 组件初始化
const viewer = new PhotoSphereViewer.Viewer({
  container: '#panorama-container',
  panorama: '你的初始全景资源地址',
  showLoader: false,
})

// 初始加载完成隐藏加载图
viewer.addEventListener('ready', () => {
  document.querySelector('.custom-panorama-loader').style.display = 'none'
})

// 所有场景（包括setPanorama切换）开始加载时显示加载图
viewer.addEventListener('render-start', () => {
  document.querySelector('.custom-panorama-loader').style.display = 'block'
})

// 渲染完成后隐藏加载图
viewer.addEventListener('render-complete', () => {
  document.querySelector('.custom-panorama-loader').style.display = 'none'
})

对应的HTML结构参考：

<div id="panorama-container" style="position: relative; width: 100%; height: 80vh;">
  <!-- 自定义加载图片 -->
  <img 
    class="custom-panorama-loader" 
    src="你的自定义加载图路径" 
    style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 999;"
  >
</div>

踩坑提示：不要尝试在setPanorama的配置里找loader相关参数，官方没有开放自定义默认loader内容的配置项，上面两种方案已经覆盖所有使用场景，不需要修改源码。

内容的提问来源于stack exchange，提问作者Y Z