Всего ползунок прыгает на нагрузке - AnythingSlider

Question

Я использую AnythingSlider разместить контент на разработчике для нового сайта:

http://sitedev.lcadfiles.com/interactive_barrett.html

Когда ползун первых нагрузки на данной странице, есть небольшой прыжок (весь ползунок, стрелки и т. д. перемещает несколько пикселей, прежде чем оседать в правильное положение). После приземления все работает нормально. Сдвиг не зависит от браузера, как это происходит на моих старых и новых машинах с 4 различными браузерами (и различными версиями браузера).

Есть ли что-то, что я поставил неправильно? Я предполагаю, что он может быть где-то глобальным, например, whatSlider.js (или, возможно, .css - хотя это кажется менее вероятным), но не видел ничего, что выделялось.

Answer 1

Была такая же проблема. Быстрое обходное решение (работает для меня).

например. у вас есть html-код, как показано ниже, добавьте стиль = "visibility: hidden;" к вашему контейнеру anythingslider.

<div id="slider_nest" style="visibility:hidden;"> 
    <ul id="your_anythingslider"> 
    ... 
    </ul> 
</div> 

в коде js, измените стиль на видимый, когда документ готов. например (JQuery)

jQuery(document).ready(function($) { 
    $('#slider_nest').css('visibility', 'visible'); 
    ... 
    $('#your_anythingslider').anythingslider(); 
    ... 
} 

Надеюсь, это поможет!

Обновление: добавить маску ползунка с гильзой-погрузчиком.

например. в HTML, вы будете иметь что-то, как показано ниже:

<div id="slider_mask" style="background: #000 url('ajax-loader.gif') no-repeat center;  display:block; height:568px; width:1050px; margin:0 auto;"> 
</div> 
<div id="slider_nest" style="display:none; height:568px; width:1050px; margin:0 auto;"> 
    <ul id="your_anythingslider"> 
    ... 
    </ul> 
</div> 

Теперь в JS (JQuery):

jQuery(document).ready(function($) { 
    $('#slider_mask').hide(); 
    $('#slider_nest').css({'display':'block'}); 
    ... 

Answer 2

OMG, это, наконец, решить нашу проблему! Спасибо.

Поскольку я использую плагин Wordpress на собственную тему, я должен был настроить его немного так:

Добавить это перед шорткодом в header.php файла:

<div id="slider_mask" style="background: #FFF url('ajax-loader.gif') no-repeat center;display:block; height:323px; width:940px; margin:0 auto;"> 
</div> 

Добавьте это в разделе header.php файла:

<script type="text/javascript"> 
    $(document).ready(function(){ 
    $('#slider_mask').hide();   
    $('.anythingSlider').css({'display':'block'}); 
} 

Добавьте это к CSS файла:

.anythingSlider {display:none;}