Nivo 滑块加载问题答案

【问题标题】：Nivo slider loading problemNivo 滑块加载问题
【发布时间】：2011-04-13 13:39:40
【问题描述】：

我遇到了奇怪的 Nivo Slider 加载问题，图片左侧显示了我的滑块在进入网站后的外观（这是错误的）和右侧 - 一段时间后。

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

【问题讨论】：

标签： javascript slider nivo-slider

【解决方案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/

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

【讨论】：

只是想在此添加注释，以防其他人遇到与我相同的问题。在我的 CSS 中，我有 .nivoSlider，这导致图像在页面加载之前显示，因为在 HTML 中，Nivo Slider 正在 <div id="slider"></div> 中加载，因此 CSS 规则在 Nivo Slider 加载和将类 nivoSlider 添加到 div 元素。我可以通过将 CSS 规则更改为 #slider 来解决此问题。

【解决方案2】：

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

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

【讨论】：

【解决方案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; }

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

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

【讨论】：