Nivo滑块加载问题

Question

我有奇怪的Nivo Slider加载问题，图像的左侧显示我的滑块在进入网站之后看起来如何（这是错误的）和正确的 - 过了一会儿。

问题是为什么我的图像在包含div（加载动画）之前被加载并且显示在另一个之下？当然主容器的位置设置为相对位置，每个容器img绝对位于顶部：0和左：0。任何想法？试图把它放在jsfiddle上，但我相信Nivo不受支持。

Answer 1

  

如何停止堆叠图像   滑块加载前的页面？

     

由于你必须使用   $（window）.load（）函数有一个   在插件应用之前延迟   元素的某些样式。您   可以通过手动应用来帮助这个   上面的CSS样式来停止图像   在插件之前堆叠在页面上   负荷。

#slider {
    //See the "style-pack" for image
    background:url(images/loading.gif) no-repeat 50% 50%; 
}
#slider img {
    display:none;
}

http://nivo.dev7studios.com/support/

下次我会从FAQ开始; /抱歉。我希望这将有助于将来的某个人......

Answer 2

我有同样的问题，并且能够使用以下样式解决它：

.nivo-slice {
    display:block;
    position:absolute;
    z-index:5;
    height:100%;
}
.nivo-box {
    display:block;
    position:absolute;
    z-index:5;
}

Answer 3

只需隐藏溢出

.nivo-slice {
    display:block;
    position:absolute;
    z-index:5;
    height:100%;
    top:0;
}
.nivo-box {
    display:block;
    position:absolute;
    z-index:5;
    overflow:hidden;
}
.nivo-box img { display:block; }

Answer 4

您可以尝试将'overflow：hidden'添加到容器元素的css中。

Answer 5

我使用Nivo-Slider的经验是，当发生这种情况时，nivo-slider.css没有正确链接到html页面。仔细检查您的样式表链接。