Question

当我使用jquery-ui button使<input type='checkbox'>元素像按钮一样时，我会看到一个漂亮的按钮，但在加载页面时它会闪烁。

在$("#checkbout").button()运行之前，我会看到一个正常的，没有样式的结账，在几毫秒后变成一个样式按钮。

没有这种闪烁效果，使用Button的正确方法是什么？

Answer 1

并不是因为你错误地使用了按钮小部件 - 你正在经历FOUC（Flash of Unstyled Content）。当您的页面包含大量元素和在页面准备就绪时运行的JavaScript时，会发生这种情况。您可以看到页面没有样式化几秒钟，因为页面需要很长时间才能加载。

有几种策略可以避免这种情况，但一种简单的方法是在$(document).ready之外为隐藏它（使用JavaScript）的按钮添加样式，然后在文档准备就绪时删除样式：

<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严重修改的内容。）

我可以使用jquery-ui按钮而不会闪烁吗？

1 个答案: