Справка по Easyslider 1.7 - все содержимое отображается при загрузке страницы

Question

При реализации Easy Slider 1.7 с jQuery на моей странице я обнаружил, что при первой загрузке страницы оба изображения отображаются на слайдере ul, а затем слайдер загружается правильно и отображается только первый слайд.

Каков наилучший способ исправить это, чтобы ползунок div не отображался до тех пор, пока скрипт не загрузится правильно? Я использую этот код для запуска:

$(document).ready(function(){   
    $("#slider").easySlider({
        auto: true,
        continuous: true,
        pause: 10000
    });
});

Answer 1

Вы можете просто скрыть содержимое с помощью CSS, например:

#slider { display: none; }

Затем покажите это при загрузке страницы:

$(document).ready(function(){
  $("#slider").show().easySlider({ auto: true, continuous: true, pause: 10000 });
});

Чтобы быть в безопасности, я бы добавил блок на страницу для пользователей, не являющихся JS, это может быть таблица стилей внутри, если у вас их много, в противном случае просто тег стиля:

<noscript><style type="text/css">#slider { display: block; }</style></noscript>

Answer 2

Я добавил приведенный ниже код в свой css, чтобы скрыть изображения из стопки.

/*Added to hide stacking of images on IE 7/8*/
#slider{
  height:227px;
  overflow:hidden;
}