我有奇怪的 Nivo Slider 加载问题,图像的左侧显示了我的滑块在进入网站后的外观(这是错误的)和正确的 - 一段时间后。
问题是为什么我的图像在包含 div 之前加载(带有加载动画)并且显示在另一个下方?当然,主容器的位置设置为相对,每个容器 img 绝对位于顶部:0 和左侧:0。有什么想法吗?试图把它放在 jsfiddle 上,但我相信 Nivo 不受支持。
我有奇怪的 Nivo Slider 加载问题,图像的左侧显示了我的滑块在进入网站后的外观(这是错误的)和正确的 - 一段时间后。
问题是为什么我的图像在包含 div 之前加载(带有加载动画)并且显示在另一个下方?当然,主容器的位置设置为相对,每个容器 img 绝对位于顶部:0 和左侧:0。有什么想法吗?试图把它放在 jsfiddle 上,但我相信 Nivo 不受支持。
如何在滑块加载之前停止我的图像在页面上堆叠?
由于您必须使用 $(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/
下次我将从常见问题开始;/对不起。我希望这将有助于未来的人......
我遇到了同样的问题,并且能够使用以下样式解决它:
.nivo-slice {
display:block;
position:absolute;
z-index:5;
height:100%;
}
.nivo-box {
display:block;
position:absolute;
z-index:5;
}
只是隐藏溢出
.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; }
我使用 Nivo-Slider 的经验是,当这种情况发生时,nivo-slider.css 没有正确链接到 html 页面。仔细检查您的样式表链接。
您可以尝试将 'overflow:hidden' 添加到容器元素的 css 中。