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

当我使用jquery-ui button来使一个<input type='checkbox'>元素的行为像一个按钮时，我看到一个漂亮的按钮，但在加载页面时闪烁。我可以使用jquery-ui按钮而不闪烁吗？

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

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

2011-12-11 ripper234

你在$（document）.ready（）'handler中调用'$（“＃checkbout”）。button（） –

@ liho1eye - 是的。 – ripper234

这并不是说您错误地使用了按钮小部件 - 您正在遇到FOUC（Flash Of Unstyled Content）。当您的页面有很多元素和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-11 17:43:49

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

回答

相关问题