javascript - 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/

下次我将从常见问题开始；/对不起。我希望这将有助于未来的人......

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

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

Answer 5

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