問題タブ [fouc]

私は現在、主にリソースローダーのためにrequirejsを使用しています。フォールバックを管理する方法が気に入っています。

私の JavaScript アプリはまったく複雑ではなく、いくつかの jQuery UI ウィジェットとその他の微調整だけです。

requirejs を使い始めるまで、FOUC が何であるかさえ知りませんでした。それは非常に目立つので、現時点では次の方法で回避しています。

そして私のスクリプトでは：

これは私が持っている最高のものであり、私が見つけた主題に関するすべてのオンライン リソースは、これらの線に沿ったものを推奨しています。

私の質問は、UI のみに影響を与えるスクリプトについて話していることを考えると、requirejs はそれだけの価値がありますか? 私が言ったように、私はそのリソースフォールバックシステムを使い続けたいと思っていますが、「FOUCのパッチ適用」全体は逆効果のようです...

すべての jQuery UI の例には head にスクリプトが含まれていますが、インターネットの誰もが、body を閉じる前に、または非同期ローダーを使用してスクリプトを含めることを推奨しています。このアドバイスは「非 UI」スクリプトにのみ適用されますか?

そのような場合、何が最善でしょうか？

近いとはいえ、これは単なる「FOUC の質問を回避する方法」ではないことに注意してください。

編集: my page と my に含まれる外部ファイルを追加するrequire.config:

main.js で:

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

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

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

私はワードプレスで構築している開発サイトを持っています (a href="http://scottmcrae.thecrossagency.net/">開発サイトはこちら、DRY テーマ (元のテーマはこちら) を使用しています)。元のテーマにはプリローダーがありました - 無効にしましたそれは、サイトがオフよりもオンでロードするのに時間がかかったためであり、ユーザーが下部の連絡先フォームを送信すると、ページが再度更新/プリロードされるためです. ページをロードすると、ナビゲーションバー領域が最初にどちらかの高さでロードされますまたはより多くのパディング/マージン (わかりません) があり、しばらくすると適切なサイズにスナップされます. これを修正するにはどうすればよいですか?

ありがとう！

HTML5 ページが Safari モバイルに読み込まれると、コンテンツが表示される前に一瞬白く点滅します。古い「スタイル化されていないコンテンツのフラッシュ (FOUC)」の問題に似ていますが、代わりに白い画面が表示されます...「フラッシュ オブ ホワイト (FOW)」の問題と呼びます。

他の誰かがこれを見ましたか？どうすればそれを取り除くことができますか? 私は考えることができるすべてを試しました：

1. 最初のスタイル シートの上部で、ボディの背景色を黒に設定します。

2. 別のスタイル タグを使用して、ボディの背景色を黒に設定します。

   /li>

3. 必死になって、タグにインラインスタイルを追加することにしました（あえぎ！）。

   /li>

何も機能していないようです...ページをロードするたびに、この厄介な白いフラッシュが表示されます。

何か案は？Thx、キース :^)

ngResource (ライブ/ajax データ用) に基づいてアコーディオンを作成しました。すべて正常に動作しますが、読み込み時にアコーディオンが (2 回) 点滅します。どうすればこれを止めることができますか?

これは私のコード（サービス）です：

}]);

そして、これは私のテンプレートです：

PS: 関連するかどうかはわかりませんが、私のアコーディオン内には、アコーディオンと同じデータを使用するタブもあります (上記の例からわかるように)。

何か案は？

次の JS を使用して、SEO に適した方法でスタイル設定されていないコンテンツのフラッシュを回避しています。

これには、付随する CSS: も含まれ<style> .fouc {display:none;}</style>ます。

私が期待しているのは、ページの読み込み時に、少なくとも div #Container が追加されたクラス .fouc にあるはずですが、これはコンソールから手動で追加した場合にのみ発生します。

これを期待どおりに機能させるには、追加のコードなどが必要ですか?

参考までに、このスクリプトが呼び出される前に、すでに JQuery を呼び出しています。

あなたの助けに感謝します!

本文のデータベースから引き出されたいくつかのコンテンツを含むページがあり、頭の上には、そのコンテンツをフォーマットするためにリンクされた外部スタイルシートがあります。Safari では (Chrome や Firefox では発生しないようです)、スタイルのないコンテンツの素敵なフラッシュが表示されます。

これにはJavaScript以外の修正が必要です。phpスクリプトが本体で実行される前に適用されるように、外部CSSシートリンクを配置する方法はありますか? -頭の一番上にいると自動的にこれが行われると思いますが、どうやらサファリではないようです。何かアイデアはありますか?

1 秒ほどの間、次のように表示されます。

その後：