WordPress(Elementor)如何在lightbox主图下方添加加载提示图

可以实现，不需要修改Elementor插件核心文件，仅通过自定义CSS搭配极少量页脚JS就能完成，配置完成后不会随插件升级失效。

Elementor自带的Lightbox灯箱加载图片时，会先渲染黑色遮罩层，再等主图资源加载完成后才把图片插入容器，这段空窗期容器内无任何内容，就会出现纯黑无反馈的问题。我们只需要给灯箱的图片容器预设加载状态的占位内容，再通过JS监听主图加载完成事件，加载完成后移除占位即可。

• 准备占位素材：可以做一张带「加载中」提示的小尺寸动图/静态图，建议尺寸控制在64px*64px以内，体积压到10KB以下，上传到WordPress媒体库后复制图片的完整URL。如果不想额外用图片，也可以直接用纯CSS绘制加载动画，零额外资源开销。
• 添加自定义CSS：进入WordPress后台「外观 → 自定义 → 额外CSS」，粘贴以下代码，把代码中占位图的URL替换成你自己上传的加载图地址：

/* Elementor灯箱加载占位样式 */
.elementor-lightbox .elementor-lightbox-image {
  /* 替换url()内的地址为你的加载提示图路径 */
  background: #000 url("替换为你的加载中图片URL") no-repeat center center;
  background-size: contain;
  min-width: 64px;
  min-height: 64px;
}
/* 主图加载完成后隐藏占位 */
.elementor-lightbox .elementor-lightbox-image.img-loaded {
  background: transparent;
}

• 添加自定义JS：进入WordPress后台「Elementor → 自定义代码」，新建一段代码，投放位置选择「页脚」，加载优先级设为默认，粘贴以下代码后发布：

document.addEventListener('DOMContentLoaded', () => {
  // 监听Elementor灯箱唤起事件
  elementorFrontend.hooks.addAction('frontend/element_ready/global', () => {
    if (!window.elementorLightbox) return;
    const lightbox = window.elementorLightbox.getLightbox();
    lightbox.on('show', () => {
      const targetImg = document.querySelector('.elementor-lightbox .elementor-lightbox-image');
      if (!targetImg) return;
      // 每次打开灯箱先重置加载状态
      targetImg.classList.remove('img-loaded');
      // 轮询检测主图是否加载完成
      const loadTimer = setInterval(() => {
        if (targetImg.complete && targetImg.naturalWidth > 0) {
          targetImg.classList.add('img-loaded');
          clearInterval(loadTimer);
        }
      }, 30);
    });
  });
});

• 配置完成后记得清空网站缓存插件、CDN缓存以及本地浏览器缓存再测试，避免旧资源导致效果不生效。
• 如果选择纯CSS加载动画方案，只需要把CSS里background的图片地址部分替换成你写的加载动画样式即可，JS部分不需要改动。
• 所有代码都挂在Elementor和主题的官方自定义入口，不会修改插件原生文件，后续升级Elementor或者主题都不会导致配置丢失。

内容的提问来源于stack exchange，提问作者Pavel Guzenko