jquery - Nivo slider ，在触发之前，所有图像都在页面上可见

Question

我在网站上使用 nivo slider ，在加载之前，所有图像在页面上静态大约一秒钟。一旦 nivo slider 加载完毕，它们就会全部放入 slider 中。

有办法解决这个问题吗？在加载任何页面之前使 slider 首先触发？网站吧www.pegasusproperty.co.uk我用于 slider 的代码是

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

<小时/>

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

#slider {
 overflow: hidden;   
}