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

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