Question

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.

Is there a way to get around this? To make the slider trigger first before any of the page is loaded? The site it http://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 

It happens best in Firefox

regards

Answer 1

Try this

Set you div slider to 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 }); 
});

---

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