Question

我正在使用网站上的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中最好用

问候

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

Answer 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,
    });
});

Answer 3

像火花一样，我接近这个可见度，以便其他内容不会改变。

如果像我一样你正在使用Views Nivo Slider for drupal那么你将从视图中设置你的动画速度等，所以你需要在jQuery脚本中设置的是可见性。注意我更喜欢表达jQuery css的方式略有不同

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

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

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

Answer 4

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

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

您可以设置所需的高度。

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

4 个答案: