2

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

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

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

4

1 回答 1

2

与其说是您错误地使用了按钮小部件，不如说是您正在体验 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 大量修改的内容）。

于 2011-12-11T17:43:49.127 回答