Nivo slider, before it's triggered all the images are visible on the page

问题

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

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

回答2:

I prefer to use visibility:hidden; rather than display:none; since it does not remove the element from the content flow. I think it's visually better not to have content shifting around after the page loads.

<div id="slider" style="visibility:hidden;">

Make it visible after the images fully load without any additional content shifting.

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

回答3:

Like sparky I approached this with visibility so that other content didn't shift.

If like me you are using Views Nivo Slider for drupal then you will set your animation speed etc from within views so all you need to set in your jQuery script is the visibility. Note I prefer a slightly different way of expressing the jQuery css

$(window).load(function() { 
    $('#slider').css({visibility: 'visible'});
});

In your page the following code is fine, but I prefer to set styles in css.

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

回答4:

My solution was just to add this class:

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

You can setup the height you need.

来源：https://stackoverflow.com/questions/8243943/nivo-slider-before-its-triggered-all-the-images-are-visible-on-the-page

标签

jquery

nivo-slider