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

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

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

 $(window).load(function() { $('#slider').nivoSlider({ effect: 'fade', animSpeed: 700, pauseTime: 4000, }); });  this code is in the head of the document 

它在Firefox中发挥得最好

问候

Answer 1

试试这个

将div slider设置为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; 因为它不会从内容流中删除元素。 我认为在页面加载后不要让内容转移在视觉上更好。

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

 $(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中设置样式。

Answer 4

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

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

您可以设置所需的高度。