4

Twitter のソース コードの上部に次のような記述があることに気付きました。

data-fouc-class-names="swift-loading"

Google で簡単に検索すると、これを使用している他の Web サイトもいくつか見つかりますが、その目的を説明するものは見つかりませんでした。このような人気のある Web サイトのマークアップに組み込むと (条件付きHTMLクラスが利用されているため、起動に数回かかる)、何かに役立つはずです。

「FOUC」とも呼ばれる「スタイルのないコンテンツのフラッシュ」の概念はよく知っていますが、このコードが具体的に何に関係しているのかについて興味があります。

4

2 に答える 2

2

38-40行目を見ると、

<script id="swift_loading_indicator">
   document.documentElement.className=document.documentElement.className+" "+document.documentElement.getAttribute("data-fouc-class-names");
</script>

これにより、ドキュメント要素クラスが変更され、この属性に設定された値が含まれるようになります。

これにより、CSS は、ページと JavaScript の読み込み時に「スタイル設定されていないコンテンツのフラッシュ」を非表示にできます。

その後、スクリプトはこのクラスを削除して、完全にロードされたページをロードできるようにします。

また、Ajax ページ読み込みコードで使用されているようで、コンテンツが非表示で読み込まれ、すべてのコンテンツが読み込まれると表示されます。

名前で始まる属性data-は、html 5 仕様の一部であり、プライベート データを表します。それらは、HTML5 Validators による検証を破ることなく、Web ページが Web ページ内に情報を保存できるようにするために存在します。

于 2013-11-04T15:17:43.583 に答える