Featherlight Gallery切换下一张图片时加载动画不显示问题求助

嘿，我之前也碰到过这个坑！官方wiki的CSS加载方案确实只在首次打开灯箱时生效，切换图片时因为Featherlight的内容更新机制，加载动画直接“失踪”了，导致灯箱空白到图片加载完成。咱们来一步步把它修好：

问题根源 #

原来的加载动画是绑定在.featherlight-first .featherlight-content:before选择器上的，这个类只有首次打开灯箱时才会被添加到容器上。当你点击「下一张」时，Featherlight只会替换灯箱内部的图片元素，不会重新添加这个初始类，所以加载动画就没触发，只能看着空白等图片加载。

修复方案 #

我们需要调整CSS规则，再结合Featherlight的回调事件，让加载动画在每次切换图片时都能正常显示：

1. 更新CSS加载动画规则 #

把原来的选择器改成全局生效，用自定义类来控制动画显示：

/* 定义旋转加载动画 */
@keyframes featherlightLoader {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 当灯箱带有loading类时，显示加载动画 */
.featherlight.loading .featherlight-content:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50px;
  height: 50px;
  margin: -25px 0 0 -25px;
  border: 5px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: #ffffff;
  animation: featherlightLoader 1s linear infinite;
  z-index: 10;
}

2. 用Featherlight事件动态控制加载状态 #

通过Featherlight的回调事件，在切换图片时手动添加/移除loading类：

$(document).ready(function() {
  $('.featherlight-gallery').featherlightGallery({
    // 准备加载新内容前，给灯箱加上loading类
    beforeContent: function() {
      $(this.$instance).addClass('loading');
    },
    // 内容加载后，监听图片加载完成再移除loading类
    afterContent: function() {
      const $lightbox = $(this.$instance);
      const $img = this.$content.find('img');
      
      // 如果图片是缓存的（已经加载完成），直接移除类
      if ($img[0].complete) {
        $lightbox.removeClass('loading');
      } else {
        // 否则等待图片加载完成后再移除
        $img.on('load', function() {
          $lightbox.removeClass('loading');
        });
      }
    }
  });
});

为什么这样有效？ #

• 我们不再依赖Featherlight的初始类，而是用自定义的loading类来控制动画显示，更灵活。
• 每次切换图片前，beforeContent事件触发，给灯箱加上loading类，加载动画立刻显示。
• 不管图片是缓存还是新加载，我们都会等它加载完成后再移除loading类，确保动画直到图片就绪才消失。

这样调整后，不管是首次点击还是切换下一张，灯箱都会显示加载动画，再也不会出现空白等待的尴尬情况啦！

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