3

別の会社から提供されたWebアプリケーションがあり、CSSを介して半限定のカスタマイズが可能であり、の最後と<head>最初と最後にHTMLコンテンツが含まれてい<body>ます。

CSSだけで提供されるよりも多くのカスタマイズが必要なので、（直前に</body>）jQueryと<script>タグを挿入して、提供されているHTMLのがらくたをマッサージします。（ページ上のさまざまなHTML要素とコンテンツの追加、親の変更、および削除。）

残念ながら、このアプローチは、ページが再構築されるときに、フラッシュする前に元の（CSSスタイルの）ページコンテンツが一時的に表示されることをユーザーが確認できることを意味します。

loadこれらの変更を行う前にまたはイベントを待っているわけではありませんdocument.readyが、すべての要素が追加された瞬間にDOMを直接操作します。

ページの読み込み中に事前に変更されたコンテンツが表示されないようにするにはどうすればよいですか？

私の現在の計画は、移動する予定のコンテンツを非表示にするCSSを追加し、<body>ロードしたらすぐにJSを使用してクラスを設定してこのCSSルールを有効にし、DOMの変更後にクラス/CSSルールを削除することです。完了。ただし、これがハックかどうかはわかりません。よりクリーンなソリューションはありますか？

4

3 に答える 3

1

私の最終的な解決策は次のとおりです。

  1. の開始直後に次のコードを追加します<body>。

    <script type="text/javascript">
  document.body.className += ' loading';
</script>

  2. CSS を使用して、移動または削除される部分を非表示にします。

    body.loading #navigation,
body.loading ol.extra-links {
  display:none !important
}

  3. loadingすべての DOM 操作の後、最後にあるクラスを削除します。

      <!-- include jQuery for transformation work -->
  <script type="text/javascript">
    // all transformations
    $(document.body).removeClass('loading');
  </script>
</body>

このアプローチの利点は、読み込み中に空白の画面が表示されないことです。削除または移動されていないコンテンツ (一部の CSS ヘッダー) が表示され、追加のコンテンツが周囲に表示されると、場合によってはわずかに移動することがあります。

于 2012-08-16T21:21:18.830 に答える
1

http://gayadesign.com/scripts/queryLoader2/

そんな感じ？

明確にするために、私はそのスクリプトを書いていません。

于 2012-08-16T16:17:26.183 に答える