3

問題の本質は次のとおりです。

ページがあり、ブラウザー拡張機能のコンテンツを変更する必要があり、jQuery を使用できます。

を試してみ$(document).ready()ましたが、コンテンツはまだ短い期間表示されています (FOUC)。サーバー上のページ スタイルを変更できません。

kango フレームワークを使用して拡張機能を構築しています。

4

2 に答える 2

1

ECMAscript だけを使用すると、確実に回避することはできません。イベントを待っている場合、その時点で DOM はほとんどレンダリングされて表示されているため、ショットはありませんDOMContentLoaded(これが短時間表示されます)。

最善の方法は、できるだけ早くCSSを変更することです。DOM がレンダリングされる前にスタイルシート定義がロードされ、次のように設定した場合

body {
    display: none;
}

あなたは何も見えないでしょう。あなたは次のように試すことができます

<body>
    <script>
        document.body.style.display = 'none';
    </script>
    <!-- more html -->
</body>

それが実行可能/使用可能なソリューションである場合。

于 2013-01-30T11:46:08.300 に答える
0

CSSとJavaScriptを組み合わせて使用​​することをお勧めします。構築しているサイトでjQueryUIを使用しても同じ問題が発生し、これらのソリューションの多くがJavaScriptを使用していないユーザーがコンテンツを利用できなくなることがわかりました。

だから、これが私がしたことです：

CSS：

.flash #wrapper {
     display: none;
}

これは、クラス<div id="wrapper">の子孫である場合にのみ非表示に設定されます。flashそこで、JavaScriptを使用していないユーザーから隠されないようにするために、flashクラスを<html>要素に追加します。したがって、エンドユーザーがJavaScriptを有効にしている場合にのみ物理的に非表示にできます。そうでない場合は、少なくともスタイルなしのコンテンツを介してアクセスできます。

JavaScript：

$('html').addClass('flash');
$(document).ready(function() {
     /* Do all your stuff */

     /* When done show the wrapper with the content styled */
     $(#wrapper).show();
});

ページの読み込み時間によっては、少しフラッシュが発生する場合がありますが、スタイルが設定されていないコンテンツのフラッシュではなく、かなり醜いです。私の場合、<ul>最初に通常の要素をフラッシュし、次にmenuUIアイテムをフラッシュするjQueryUIメニュー項目があり、各列が同じ高さに<div>なるように要素のサイズがjQueryで変更されますが、最初に異なる高さでフラッシュされます。<div>これにより、JavaScript以外のブラウザーへのアクセシビリティを維持しながら修正されました。

于 2013-02-01T16:41:45.153 に答える