我可以使用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按鈕而不閃爍嗎？

回答

相關問題