Javascript 我可以使用jquery ui按钮而不闪烁吗？_Javascript_Jquery_Jquery Ui_Button_Jquery Ui Button

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

javascript jquery jquery-ui button

Javascript 我可以使用jquery ui按钮而不闪烁吗？,javascript,jquery,jquery-ui,button,jquery-ui-button,Javascript,Jquery,Jquery Ui,Button,Jquery Ui Button,当我使用使元素的行为类似于按钮时，我会得到一个漂亮的按钮，但在加载页面时它会闪烁在运行$（“#checkbout”）.button（）之前，我看到一个正常的、未设置样式的签出，它在几毫秒后变成了一个设置样式的按钮没有这种闪烁效果的按钮的正确使用方法是什么？与其说您错误地使用了按钮小部件，还不如说您遇到了FOUC（未格式化内容的闪烁）。当页面有很多元素和JavaScript时，就会发生这种情况，这些元素和JavaScript在页面准备就绪时运行。您可以看到页面在几秒钟内未设置样式，因为加载页面

当我使用使

元素的行为类似于按钮时，我会得到一个漂亮的按钮，但在加载页面时它会闪烁

在运行

$（“#checkbout”）.button（）

之前，我看到一个正常的、未设置样式的签出，它在几毫秒后变成了一个设置样式的按钮

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

与其说您错误地使用了按钮小部件，还不如说您遇到了FOUC（未格式化内容的闪烁）。当页面有很多元素和JavaScript时，就会发生这种情况，这些元素和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>


写入（“.button{display:none；}”）；
$（文档）.ready（函数（）{
/*移除隐藏按钮的类并调用小部件：*/
$（.button”）.removeClass（“button”）.button（）；
});

示例：（使用

setTimeout

模拟页面加载）

您还可以将此技术应用于遇到问题的整个内容元素（例如包含大部分内容的

div

，这些内容被JavaScript严重修改）。

您是否在

$（“#checkbout”）.button（）中调用$（document.ready（）
处理程序？