Слайдер Nivo, до его запуска все изображения видны на странице

Question

Я использую слайдер nivo на сайте, и до его загрузки все изображения статичны на странице примерно секунду.Как только ползунки nivo загружены, они все сидят в ползунке.

Есть ли способ обойти это?Сделать ползунок триггером первым перед загрузкой какой-либо страницы?На сайте это www.pegasusproperty.co.uk код, который я использую для слайдера:

<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

в отношении

Answer 1

Попробуйте

Установите для div slider значение display: none;

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

И при загрузке страницы / документ готов показать его

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

---

Редактировать : Я думаю, что ваше решение могло бы быть намного проще.У вашего div-элемента слайдера установлены фиксированная ширина и высота, но ваши изображения увеличивают его, просто установите переполнение div на скрытый, чтобы решить проблему

#slider {
 overflow: hidden;   
}

Answer 2

Мое решение было просто добавить этот класс:

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

Вы можете установить нужную высоту.

Answer 3

Как и sparky, я подошел к этому с наглядностью, чтобы другой контент не сдвигался.

Если, как и я, вы используете Views Nivo Slider для drupal, тогда вы будете устанавливать скорость анимации и т. Д. Из представлений, поэтому все, что вам нужно установить в своем скрипте jQuery, - это видимость. Заметьте, я предпочитаю немного другой способ выражения jQuery css

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

На вашей странице следующий код подходит, но я предпочитаю устанавливать стили в css.

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

Answer 4

Я предпочитаю использовать visibility:hidden; вместо display:none;, поскольку он не удаляет элемент из потока контента. Я думаю, что визуально лучше не сдвигать содержимое после загрузки страницы.

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

Сделать его видимым после полной загрузки изображений без какого-либо дополнительного смещения содержимого.

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