1

Webページに次のHTMLがあります。

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

ページが読み込まれると、チェックボックスはwijmoを使用して次のようにスタイル設定されます。

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

これは機能しますが、ページが表示されてから要素がスタイル設定されるまでに1〜2秒の遅延があるという問題があります。その遅延の間に、古いスタイルのチェックボックスが表示されます。

この遅延を減らすために私が何ができるか誰かが知っていますか？たとえば、wijcheckbox（）関数を早く起動させることはできますか？ドキュメントを#htmlEditに置き換えてみましたが、うまくいきませんでした。

4

2 に答える 2

4

ここでの課題は、JavaScriptを介してDOM要素にアクセスするには、DOM要素がブラウザーによって既に解析されている必要があり、ブラウザーによって解析されると、非表示に設定されていない限り、すでに画面に表示されている可能性があることです。

ここでの最良の答えは、CSSスタイルを介して初期の外観を制御することです。これは、アイテムが解析されるときに有効になり、最初の表示にCSSスタイルが組み込まれるためです。

特定のオブジェクトでjavascriptを実行する最も速い方法は、HTMLソースの要素の直後にインラインjavascriptを配置することです。

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

ただし、これを頻繁に行う必要がある場合、これはすぐに厄介になります。通常、マークアップとJSを散在させることはお勧めできません。

したがって、CSSでスタイルを設定できない場合は、オブジェクトを最初に非表示にして、JSでスタイルを設定した後でのみ表示することをお勧めします。

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

そして、適切にスタイルを設定した後、JSで表示できるようにします。

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

注：ページが適切にレイアウトされ、チェックボックスが表示されるようになると、ページが劇的に飛び回るほどページがリレーアウトされないため、visibility: hidden代わりにここで使用しました。display: noneこれは、チェックボックスなしでレイアウトを表示し、チェックボックスが表示されたときにレイアウトが再配置されるのを確認するよりも好ましいようです。新しいチェックボックスのスタイルが大幅に異なる場合でも、新しいスタイルを追加すると少しずれることがありますが、可視性を使用する場合はそれほど劇的ではありません。

これらがたくさんある場合は、クラスを使用して自動化できます。

<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");
})
于 2012-04-06T16:32:28.073 に答える
1

ドキュメントの読み込み時間を短縮するためにできることは何もありませんが、これを試すことができます。

CSS：

#htmlEdit {
    display: none;
}

Javascript：

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

これにより、適切なスタイルになるまで要素が非表示になります。

于 2012-04-06T16:23:26.347 に答える