jQueryスタイルを自分の要素より早く作成するにはどうすればよいですか？

Question

は、私は自分のWebページで、次のHTMLがあります。ページが読み込まれたら

<input id="htmlEdit" type="checkbox"/> 

を次のようにチェックボックスがwijmo使用してスタイルを取得します：

$(document).ready(function() { 
     var store = window.localStorage; 
     $('#htmlEdit').wijcheckbox(); 

これは動作しますが、私はそれで問題を抱えていますページ が表示され、要素がスタイリングされるまでに1〜2秒の遅延があります。その遅れの間、私は古いスタイルのチェックボックスを見ます。

私はこの遅延を減らすために何ができるか分かりませんか？たとえば、 wijcheckbox（）関数を先に起動させることはできますか？ドキュメントを#htmlEditに置き換えようとしましたが、 が機能しませんでした。

Answer 1

ここで問題となるのは、javascriptを使用してDOM要素にアクセスするには、DOM要素が既にブラウザによって解析されていて、ブラウザで解析されていなければならないということです見えるようにする。

ここでの最もよい答えは、アイテムが解析され、最初の表示にCSSスタイルが組み込まれるため、CSSスタイルを使用して最初の外観を制御することです。あなたはこの多くを行う必要がある場合

<input id="htmlEdit" type="checkbox"/> 
<script type="text/javascript> 
$('#htmlEdit').wijcheckbox(); 
</script> 

しかし、これはすぐに散らかっ取得する：あなたが指定されたオブジェクトのJavaScriptを実行することができます

最速の方法は、HTMLソース内の要素の直後にインラインJavaScriptを置くことですマークアップとJSを混在させることは一般的には良い考えではありません。

CSSでスタイルを設定できない場合は、オブジェクトを最初に非表示にして、JSでスタイルされた後に表示するほうがよいでしょう。

<input id="htmlEdit" type="checkbox" style="visibility: hidden" /> 

そして、あなたはそれを適切にスタイリングした後、その後、あなたのJSでそれが見えるように：

$(document).ready(function() { 
    $('#htmlEdit').wijcheckbox().css("visibility", "visible"); 
}) 

注：あなたのページのレイアウトが正常になるので、私はdisplay: noneの代わりに、ここでvisibility: hiddenを使用し、チェックボックスページが目立つようになると、ページが再レイアウトされず、物事が劇的に飛び交うことになります。これは、チェックボックスを表示しなくてもレイアウトを確認し、チェックボックスが表示されたときにその位置を確認する方が望ましいと思われます。新しいチェックボックスのスタイルが大幅に異なる場合は、新しいスタイルを追加するとビットが少しシフトすることがありますが、視認性を使用すると劇的に変化することはありません。

<input class="styledCheckbox" id="htmlEdit" type="checkbox"> 

CSS：

/* initially hidden until wij style is applied */ 
.styledCheckbox {visibility: hidden;} 

Javascriptを：

$(document).ready(function() { 
    // add style to all checkboxes and make them visible 
    $('.styledCheckbox').wijcheckbox().css("visibility", "visible"); 
}) 

Answer 2

ありますが、ドキュメントのロード時間を短縮するためにできることは何だんが、あなたはこの試みることができる：

CSS：

#htmlEdit { 
    display: none; 
} 

Javascriptを：皮革

$(document).ready(function() { 
    var store = window.localStorage; 
    $('#htmlEdit').wijcheckbox(); 
    $('#htmlEdit').show(); 
}); 
​ 

をそれが適切にスタイルされるまで要素。