javascript - Featherlight gallery 不显示加载器动画(加载下一个图像灯箱)

Question

我已经使用 Featherlight Gallery 设置了一个图像灯箱。
我正在使用这样的加载器动画:
http://github.com/noelboss/featherlight/wiki/Add-a-CSS-Only-Loader

但是，动画仅在您首次点击图片时显示。
如果您单击“下一张图片”，则在加载下一张图片时灯箱为空白。

测试示例(如何重现此问题):
去这里:http://jsfiddle.net/geraldo/w691hytm/

@-webkit-keyframes featherlightLoader {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes featherlightLoader {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.featherlight-loading .featherlight-content {
  -webkit-animation: featherlightLoader 1s infinite linear;
          animation: featherlightLoader 1s infinite linear;
  background: transparent;
  border: 8px solid #8f8f8f;
  border-left-color: #fff;
  border-radius: 80px;
  width: 80px;
  height: 80px;
  min-width: 0;
}

.featherlight-loading .featherlight-content > * {
  display: none !important;
}

.featherlight-loading .featherlight-close,
.featherlight-loading .featherlight-inner {
  display: none;
}

您将在屏幕右下角看到 3 个缩略图。
单击鸟类的中间图像。它将显示加载动画。

点击“上一张图片”箭头。在加载大图像时，它什么也没显示，只是一个空白的白色区域。

单击“下一张图片”时是否未调用“.featherlight-loading”类？我需要向 css 添加一些东西吗？

提前致谢。

Answer 1

这是预期的行为。打开灯箱时会添加加载类，因为它提供了一些视觉转换，让用户知道正在发生的事情。在图像之间切换时，淡出和过渡效果应该足以指示正在发生的事情。

您遇到的问题是您使用的图片大小过大 - 每张接近 15MB。灯箱 UX 的设计不会考虑如此大的文件，因此有点缺乏 UX。

它似乎也没有在任何东西上放置一个明显的类，但如果您愿意稍微修改一下 CSS，您仍然可以这样做。

当 .featherlight-content 的父类具有 .featherlight-loading 类时，您可以不使用 css 将 .featherlight-content div 本身放入加载元素中，而是可以向 .featherlight-content 添加一个伪元素。这里的关键是 loader 元素将在灯箱显示的所有时间呈现，而不仅仅是当它有一个类为 .featherlight-loading 的父元素时。但是，当加载图像时，它将显示在图像的顶部，因此您只能在框首次加载时以及在图像之间转换时看到它。

这是更新后的 fiddle :http://jsfiddle.net/w691hytm/20/

这里是带有更改注释的 CSS:

.inline { display: none }

/**
 * Featherlight Loader
 *
 * Copyright 2015, WP Site Care http://www.wpsitecare.com
 * MIT Licensed.
 */
@-webkit-keyframes featherlightLoader {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes featherlightLoader {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

// removed existing loading styles, added some fixed size when loading class is applied, otherwise spinner would be invisible/cutoff
.featherlight-loading .featherlight-content{
  width: 96px;
  height: 120px;
  background: none;
  overflow: hidden;
  margin: 0;
}

// moved the loader styles to the pseudo-element and added positioning css
.featherlight .featherlight-content:before {
  position: absolute;
  box-sizing: border-box;
  display: block;
  content:'';
  -webkit-animation: featherlightLoader 1s infinite linear;
          animation: featherlightLoader 1s infinite linear;
  background: transparent;
  border: 8px solid #8f8f8f;
  border-left-color: #fff;
  border-radius: 80px;
  width: 80px;
  height: 80px;
  min-width: 0;
  top: calc(50% - 40px);
  left:calc(50% - 40px);
  z-index: 0;
}

// to make the image appear in front of the loader we apply a z-index:
.featherlight .featherlight-content img{
  z-index: 1;
  position:relative;
}
// to make prev and next buttons appear in front of the image we apply a z-index:
.featherlight-previous,
.featherlight-next{
  z-index: 2;
}
.featherlight-loading .featherlight-content > * {
  display: none !important;
}

.featherlight-loading .featherlight-close,
.featherlight-loading .featherlight-inner {
  display: none;
}