Nivo 滑块，在触发之前，所有图像都在页面上可见答案

【问题标题】：Nivo slider, before it's triggered all the images are visible on the pageNivo 滑块，在触发之前，所有图像都在页面上可见
【发布时间】：2011-11-23 14:36:10
【问题描述】：

我在网站上使用 nivo 滑块，在加载之前，页面上的所有图像都是静态的大约一秒钟。加载 nivo 滑块后，它们都位于滑块中。

有没有办法解决这个问题？在加载任何页面之前先触发滑块？ www.pegasusproperty.co.uk 我用于滑块的代码的站点是

<script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider({
        effect: 'fade',
        animSpeed: 700,
        pauseTime: 4000,
    });
});
</script>    this code is in the head of the document

在 Firefox 中效果最好

问候

【问题讨论】：

标签： jquery nivo-slider

【解决方案1】：

试试这个

设置你的 div slider 到 display: none;

<div id="slider" style="display: none;">

在页面加载/文档准备就绪时显示它

$(window).load(function() { 
    $('#slider').show().nivoSlider({ effect: 'fade', animSpeed: 700, pauseTime: 4000 }); 
});

编辑：我认为您的解决方案实际上可以简单得多。您将滑块 div 设置为固定的宽度和高度，但您的图像将其扩展得更大，只需将 div 的溢出设置为隐藏即可解决问题

#slider {
 overflow: hidden;   
}

【讨论】：

user1047444，我编辑了我的答案并添加了另一个应该同样有效且更简单的解决方案。
没有理由不把它们锁起来...$('#slider').show().nivoSlider({
@Sparky672 点。只是个人偏好将 jQuery 方法调用和插件调用分开。
@JeffWilbert...非常感谢！我尝试了“编辑：”上方的解决方案。这对我来说很完美！ +1！！！

【解决方案2】：

我更喜欢使用visibility:hidden; 而不是display:none;，因为它不会从内容流中删除元素。我认为在页面加载后不要让内容四处移动在视觉上会更好。

<div id="slider" style="visibility:hidden;">

在图像完全加载后使其可见，无需任何额外的内容移动。

$(window).load(function() { 
    $('#slider').css({'visibility':'visible'}).nivoSlider({
      effect: 'fade',
      animSpeed: 700,
      pauseTime: 4000,
    });
});

【讨论】：

【解决方案3】：

像 sparky 一样，我以可见性来处理这个问题，这样其他内容就不会发生变化。

如果您像我一样使用 Views Nivo Slider 进行 drupal，那么您将在视图中设置动画速度等，因此您需要在 jQuery 脚本中设置的只是可见性。注意我更喜欢一种稍微不同的方式来表达 jQuery css

$(window).load(function() { 
    $('#slider').css({visibility: 'visible'});
});

在您的页面中，以下代码很好，但我更喜欢在 css 中设置样式。

<div id="slider" style="display: none;">

【讨论】：

【解决方案4】：

我的解决方案就是添加这个类：

.nivoSlider {
    overflow: hidden;
    max-height: 460px;
}

你可以设置你需要的高度。

【讨论】：