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。灯箱用户体验将不会被设计为具有如此庞大的文件的意图，因此用户体验有点缺乏。

它似乎也没有给任何明显的类，但如果你愿意破解CSS，你仍然可以做到这一点。

当.featherlight-content div具有.featherlight-loading类的父级时，不是使用css将.featherlight-content div本身变成loading元素，而是可以将伪元素添加到.featherlight-loading。这里至关重要的是，loader元素将一直呈现灯箱所显示的内容，而不仅仅是当它具有类.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; }的父类时。但是，当图像加载时，它将显示在其顶部，因此您只能在首次加载框时和在图像之间转换时看到它。

这是更新的小提琴：http://jsfiddle.net/w691hytm/20/

这是带有更改评论的CSS：

#include <iostream>
#include <string>
using namespace std;

void selectionSort(string[], int);

void displayArray(string[], int);



int main()
{
const int SIZE = 20;

string name[SIZE] =

{"Collins, Bill", "Smith, Bart", "Michalski, Joe", "Griffin, Jim", "Sanchez, Manny", "Rubin, Sarah", 
"Taylor, Tyrone", "Johnson, Jill", "Allison, Jeff", "Moreno, Juan", "Wolfe, Bill", "Whitman, Jean", "Moretti, Bella", 
"Wu, Hong", "Patel, Renee", "Harrison, Rose", "Smith, Cathy", "Conroy, Pat", "Kelly, Sean", "Holland, Beth"};

selectionSort(name, SIZE);

displayArray(name, SIZE);

return 0;
}



// use selection sort to arrange  values in a string array in ascending order                                                       
void selectionSort(string array[], int size)
{
int startScan, minIndex;

string minValue;

for (int startScan = 0; startScan < (size - 1); startScan++)
{
    minIndex = startScan;

    minValue = array[startScan];

    for (int index = startScan + 1; index < size; index++)
    {
        if(array[index] < minValue)
        {
            minValue = array[index];

            minIndex = index;
        }
    }
    array[minIndex] = array[startScan];

    array[startScan] = minValue;
}
}



// display all values in the array  
void displayArray(string name[], int size)
{
for (int i = 0; i < size; i++)
{
    cout << name[i] << endl;
}
}

Featherlight图库不显示加载器动画（加载下一个图像灯箱）

1 个答案: