問題タブ [fouc]

私は Head.js、Google Web Fonts を使用し、Web 上の他の場所からいくつかのコンテンツ (プレースホルダー画像) を取得しています。

私が気付いたのは、ページの読み込み時にスタイル設定されていないコンテンツが表示され、見出しのフォントが適切に読み込まれますが、適切なウェイトではなく、適切なウェイトが読み込まれるということです。

ヘッダー テキストでこの奇妙な動作を引き起こしている原因について何か考えはありますか? スタイルなしから適切な要求されたフォントに移行するだけではいけませんか?

また、JavaScript が無効になっている人に優しい FOUC を停止する最善の方法は何ですか?

ありがとう！

詳細:

Google が提供する Javascript メソッドを使用して、使用する 3 つのフォントを挿入しています。'Istok+Web:700:lating' を読み込んでいることがはっきりとわかります。これは、700 の重みのみを指定する必要があることを意味します。

この方法のために、私は @font-face をまったく使用しません。普通のものであるかのように単純に font-family です。

ただし、LESS.js を使用していますが、ネットワーク アナライザーからは、大幅な速度低下は発生していないようです。

私は、多くの Javascript と jQuery を含むサイトで作業しています。私が知る限り、そのほとんどは、ドキュメントの準備ができた後に読み込まれます。ただし、ページが読み込まれると、約 1 秒の白い FOUC が表示されます。しかし、Javascript を完全に無効にすると、白い閃光はまったくありません。

ページが読み込まれるまで Javascript の読み込みが開始されないようにするにはどうすればよいですか? それはすでに自由に使用されています

...だから、ページの読み込みが完了してレンダリングされるまで Javascript は起動しないはずです...そうですか? しかし、どういうわけか、ページはレンダリングの前にスクリプトが終了するのを待ちます。JavaScript が完全に無効になっていても、ページはほとんど問題なく表示されるため、その必要はありません。

Twenty Eleven Child Theme を使用したワードプレス Web サイトがあります。私のサイドバーには、次の jQuery Vertical Mega Menu ウィジェットを埋め込みました。

http://wordpress.org/extend/plugins/jquery-vertical-mega-menu/

メニューは正常に動作します。唯一の問題は、Web サイトの読み込み時に短い FOUC (スタイル設定されていないコンテンツの点滅) が発生することです。

http://en.wikipedia.org/wiki/Flash_of_unstyled_content

点滅しないようにする方法がわかりません。解決策を含むいくつかの同様の質問を読みましたが、それを子テーマに適用する方法がわかりません。

を追加する必要があると言う人もいますjQuery(document).ready(function() {。しかし、どこに？子テーマの functions.php に追加しようとしました:

しかし、次のような解析エラーが表示されます。

解析エラー: 構文エラー、予期しない T_FUNCTION、28 行目の /..../functions.php に ')' が必要です

私はバイラル ゲートと呼ばれるスクリプトを使用しています。誰かが Facebook のようなボックスをクリックした後、div 内のコンテンツのロックを解除するために利用されます。唯一の問題は、div がスクリプトの前に来ることです。スクリプトは、ユーザー接続に応じて 5 秒以内にレンダリングされます。つまり、ユーザーが div が表示されたときにページを一時停止できることを希望する場合、JavaScript はレンダリングされません。head セクションにスクリプトを挿入しようとしましたが、機能しませんでした。また、adl-inside-gate クラスで div の前に挿入しようとしましたが、同じ結果でした。これは、div とコンテンツを含む私のスクリプトです。

私はレスポンシブな再設計に取り組んでおりAddThis、クエリによって挿入された後にフォロー ボタンがページにレンダリングされるときに発生する、スタイル設定されていないコンテンツのレイアウト シフトとフラッシュを削減しようとしていModernizrます。メディアクエリに応じて、コードは IDまたはAddThisの div に挿入されます。(以前の解決済みの質問を参照してください。)ss1ss2

AddThisサポートは、ボタンがレンダリングされるまで div を非表示にすることを提案しました。私はjQuery初心者ですが、掘り下げて、 and を使用して部分的に機能するソリューションがあると思い.hideます.show。

私のmain.jsからの関連するスニペットは次のとおりです。

ss1最初にとdiv を非表示にしたにもかかわらず、ss2最初の FOUC が表示されます。ウィンドウのサイズを前後に変更すると、計画どおりに機能します。問題があるのは初期ロードだけです。おそらくレンダリング呼び出しinitAddThis();と jQuery の.show間の時間checkMq();が短すぎると思いますか?

JQuery UI ダイアログ内に読み込まれる Web ページがあります。ページが Firefox に読み込まれると、すべての CSS と JavaScript が実行される前に、プレーン テキストが 1 秒間表示されます。すべてが読み込まれると、テキストが正しく表示されます。すべての CSS/JavaScript が実行されるまでテキストが表示されないようにする方法はありますか? 可視性のオンとオフを切り替えようとしましたが、正しく機能しませんでした。

これは Firefox でのみ発生するようで、他のブラウザでは発生しません。

WebKit は私を非常に悩ませ続けました。ページの読み込み時にtransition、初期値の browser-default 値から をアニメーション化します。私は次のようなものを持っていました

しかし、それはcolor: blue!からフェードインします。他のプロパティは FOUC の影響を受けませんでしたtransition。

残念ながら、再現するのは非常に難しく、どうにかして jsfiddle することができませんでした。私の（確かにエッジの）ケースは次のように設定されています：

1. <script />「開発」バージョン:と<style type="text/less" />の束
2. 製品バージョン: スクリプトとスタイルH5BP -スタイルの連結と縮小 (それぞれ最初のlessc編集)

FOUC は状況 2 でのみ表示され@importますが、いくつかのスタイルシートの を s でインライン化した後、それは停止しました@font-face。回避策ですが、

だから、これは読み込み時間/順序に何か関係があるに違いないと思いますか?
誰もこのようなことに遭遇したことがありますか？（そうではないと思います。）

少なくとも、いつの日か誰かがこの問題に遭遇し、これが役立つことに気付くでしょう。