Могу ли я использовать кнопку jquery-ui без мерцания? - PullRequest
Новая
       39

Могу ли я использовать кнопку jquery-ui без мерцания?

2 голосов
/ 11 декабря 2011

Когда я использую кнопку jquery-ui , чтобы элемент <input type='checkbox'> вел себя как кнопка, я получаю красивую кнопку, но она мигает при загрузке страницы.

Перед запуском $("#checkbout").button() я вижу обычное оформление без стиля, которое через несколько миллисекунд превращается в стилизованную кнопку.

Как правильно использовать кнопку без этого эффекта мерцания?

1 Ответ

2 голосов
/ 11 декабря 2011

Это не так, что вы неправильно используете виджет кнопки - вы испытываете FOUC (Flash из неустановленного контента). Это происходит, когда на вашей странице много элементов и JavaScript, который запускается, когда страница готова. Вы можете увидеть страницу без стиля в течение нескольких секунд, потому что страница загружается так долго.

Существует несколько стратегий, позволяющих избежать этого, но одна из простых заключается в том, чтобы добавить стили для кнопки, которая скрывает ее (с помощью JavaScript) за пределами $(document).ready, а затем удалить стили, когда документ готов: 

<head>
    <script type="text/javascript">
        document.write("<style type='text/css'>.button { display: none; }</style>");
        $(document).ready(function () {
            /* Remove the class hiding the button and call the widget: */
            $(".button").removeClass("button").button();
        });
    </script>
</head>

Пример: http://jsfiddle.net/andrewwhitaker/gdbB5/ (использует setTimeout для имитации загрузки страницы)

Вы также можете применить эту технику ко всему элементу контента, который испытывает проблему (например, div, который содержит большую часть вашего контента, который сильно изменен JavaScript).

...