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