css3背景滑块，白页闪烁

Im当前使用codrops的css3背景滑块：

这是我放在上面的网站：

问题是，客户端不希望页面在加载第一个滑块图像之前闪烁白色或任何其他颜色。他们只是希望图像出现在那里。我找遍了所有地方，除了将背景作为滑块中的第一个图像外，似乎找不到答案

---

任何帮助都将不胜感激。

您确定这是个好主意吗

淡入效果经常被使用，不仅是因为它在渲染中的柔和和“自然”感觉，而且因为它允许浏览器有一定的时间完全加载图像，否则用户将体验加载图像的丑陋“级联”效果。我们可以很有把握地说，这将是用于背景的高分辨率图像的情况，如您的示例中所示

无论如何，如果你或你的客户仍然想尝试一下，这里有一个方法来实现它

您需要声明仅为第一个图像优化的自定义动画。比如：

@-webkit-keyframes firstImageAnimation { 
     0% { opacity: 1; }
    17% { opacity: 1; }
    25% { opacity: 0; }
   100% { opacity: 0; } }  /* complete with all other vendor prefixes */

.cb-slideshow li:nth-child(6) span { 
    background-image: url(path-to-first-image);
    -webkit-animation-delay: 30s;
       -moz-animation-delay: 30s;
        -ms-animation-delay: 30s;
         -o-animation-delay: 30s;
            animation-delay: 30s; 

然后将其分配给要首先显示的.jpg：

.cb-slideshow li:nth-child(1) span { 
   background-image:url(path-to-first-image);
   -webkit-animation: firstImageAnimation 36s linear infinite 0s;
      -moz-animation: firstImageAnimation 36s linear infinite 0s;
       -ms-animation: firstImageAnimation 36s linear infinite 0s;
        -o-animation: firstImageAnimation 36s linear infinite 0s;
           animation: firstImageAnimation 36s linear infinite 0s; 

}

这将覆盖仍指定给其他所有背景图像的原始动画

这样，在加载页面后，第一个图像将立即弹出。 不幸的是，过了一段时间，你会注意到这会打断幻灯片，因为在最后一张图像消失后，第一张图像会突然出现

一个简单的解决方法是将相同的图像指定为幻灯片中的第一个和最后一个图像，后者默认返回到与除第一个图像之外的任何其他图像相同的动画。 因此，在这种情况下，它将简单地类似于：

@-webkit-keyframes firstImageAnimation { 
     0% { opacity: 1; }
    17% { opacity: 1; }
    25% { opacity: 0; }
   100% { opacity: 0; } }  /* complete with all other vendor prefixes */

.cb-slideshow li:nth-child(6) span { 
    background-image: url(path-to-first-image);
    -webkit-animation-delay: 30s;
       -moz-animation-delay: 30s;
        -ms-animation-delay: 30s;
         -o-animation-delay: 30s;
            animation-delay: 30s; 

}

这将以无缝的方式从集合中的最后一个图像转换到第一个图像