Nivo滑块，在触发之前，所有图像都在页面上可见 [英] Nivo slider, before it's triggered all the images are visible on the page

问题描述

我在网站上使用nivo滑块，在加载之前，所有图像在页面上都是静态的，持续约一秒钟.一旦安装了nivo滑块，它们都将位于滑块中.

I'm using the nivo slider on a site and before it's loaded all the images are static on the page for about a second. Once the nivo sliders has loaded they all sit in the slider.

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

Is there a way to get around this? To make the slider trigger first before any of the page is loaded? The site it www.pegasusproperty.co.uk the code I'm using for the slider is

<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中效果最好

It happens best in Firefox

致谢

推荐答案

尝试一下

将div slider设置为display: none;

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

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

And on page load/document ready show it

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

---

编辑:我认为您的解决方案实际上可能要简单得多.您已将滑块div设置为固定的宽度和高度，但是图像将其放大了，只需将div的溢出设置为隐藏即可解决问题

---

Edit: I think your solution could actually be a lot simpler. You have your slider div set to a fixed width and height but your images expand it bigger, simply set the overflow of the div to hidden should solve the problem

#slider {
 overflow: hidden;   
}

这篇关于Nivo滑块，在触发之前，所有图像都在页面上可见的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！