Помощь 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; 
}