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

发布于 2024-12-20 19:14:28 字数 284 浏览 2 评论 0原文

当我使用 jquery-ui 按钮制作 ; 元素的行为就像一个按钮，我得到一个看起来很漂亮的按钮，但在加载页面时它会闪烁。

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

乖乖哒 2024-12-27 19:14:28

这并不是说您错误地使用了按钮小部件，而是您遇到了 FOUC（无样式内容闪烁）。当您的页面有大量元素并且 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 大量修改）。

It's not so much that you're using the button widget incorrectly--you're experiencing a FOUC (Flash Of Unstyled Content). This occurs when your page has lots of elements and JavaScript that runs when the page is ready. You can see the page unstyled for a few seconds because the page takes so long to load.

There are several strategies for avoiding this, but one simple one is to add styles for the button that hide it (using JavaScript) outside of $(document).ready, then remove the styles when the document is 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>

Example: http://jsfiddle.net/andrewwhitaker/gdbB5/ (uses setTimeout to simulate a page loading)

You could also apply this technique to an entire content element that's experiencing the problem (like a div that contains most of your content that 's heavily modified by JavaScript).

回复收藏 0 原文

~没有更多了~