jquery-ui ボタンを使用して<input type='checkbox'>
要素をボタンのように動作させると、見栄えの良いボタンが表示されますが、ページの読み込み時にちらつきます。
実行の前に$("#checkbout").button()
、通常のスタイルなしのチェックアウトが表示され、数ミリ秒後にスタイル付きのボタンに変わります。
このちらつき効果なしで Button を使用する正しい方法は何ですか?
jquery-ui ボタンを使用して<input type='checkbox'>
要素をボタンのように動作させると、見栄えの良いボタンが表示されますが、ページの読み込み時にちらつきます。
実行の前に$("#checkbout").button()
、通常のスタイルなしのチェックアウトが表示され、数ミリ秒後にスタイル付きのボタンに変わります。
このちらつき効果なしで Button を使用する正しい方法は何ですか?
ボタンウィジェットを誤って使用していることはそれほど多くありません。FOUC(Flash Of Unstyled Content)が発生しています。これは、ページに多くの要素があり、ページの準備ができたときに実行されるJavaScriptがある場合に発生します。ページの読み込みに時間がかかるため、スタイルが設定されていないページが数秒間表示されます。
これを回避するためのいくつかの戦略がありますが、1つの簡単な方法は、ボタンの外に(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によって大幅に変更されたコンテンツのほとんどが含まれている場合など)。