Nivo滑块加载问题

发布于 2024-11-01 05:00:26 字数 273 浏览 0 评论 0原文

我遇到了奇怪的 Nivo 滑块加载问题，图像的左侧显示了我的滑块在进入网站后的样子（这是错误的），而右侧则显示了一段时间后的样子。

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

nivo 奇怪的加载

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

久随 2024-11-08 05:00:26

如何停止图像堆积
滑块加载之前的页面？
由于事实上你必须使用
$(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/

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

How do I stop my images stacking down
the page before the slider has loaded?
Due to the fact you have to use the
$(window).load() function there is a
delay before the plugin apply's
certain styles to the elements. You
can help this by manually applying the
above CSS styles to stop the images
stacking on the page before the plugin
loads.

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

Next time I'll start with FAQ ;/ Sorry. I hope this will help somebody in the future...

回复收藏 0 原文

萌梦深 2024-11-08 05:00:26

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

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

I had the same issue and was able to solve it with the following styles:

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

回复收藏 0 原文

兔小萌 2024-11-08 05:00:26

只需隐藏溢出

.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; }

Just hide the overflow

.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; }

回复收藏 0 原文