問題タブ [fouc]

質問する

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

88 問題
Newest
Active
Bountied
318
Unanswered
0 投票する
4 に答える
6292 参照

javascript - Cufon フォントの置換: ページの読み込み時に発生する、スタイル設定されていないテキストのフラッシュを削除するにはどうすればよいですか?

作業中のサイトで選択した見出し要素のフォントを Cufon を使用して置き換えていますが、ページをロードするたびに、Cufon がテキストを置き換える前に、スタイル設定されていないテキストのフラッシュが目立ちます。私はそれを間違っているかもしれないと思っています。これが私が持っているものです<head>：

そして、これが私の文書の最後にあるものです：

私は何を間違っていますか？前もって感謝します！

0 投票する
4 に答える
998 参照

css - ブラウザが一瞬スタイルのないページを表示する (視覚的な不具合)

ごくまれに、Internet Explorer (7 か 8 かは問いません) が、CSS を適用せずに当社の Web ページ ( www.epsitec.ch ) を短時間表示することを確認しました。レイアウトは完全に壊れて表示され、すべてが上から下に順番に表示されます。ページの読み込みが完了すると、最終的にすべてが適切に表示されます。

私たちのウェブページは複雑なスクリプトを使用しておらず、ページの最後に QuantCast と Google Analytics 用の 2 つの JavaScript を含めるだけです。ちなみに、QuantCast スクリプトを追加する前に、すでに問題が発生していました。CSS は次の<head>セクションでリンクされます。

次に、JavaScript を含む最後のチャンクまで静的 HTML に従います。

これは非常に短い視覚的な不具合であるため、何が原因かわかりません。さらに悪いことに、私はそれを再現することができず、めったにしか現れません. グリッチの原因をさらに調査するにはどうすればよいですか? 知っておくべきベストプラクティスはありますか?

0 投票する
1 に答える
1421 参照

php - PHPページをロードするときの短い白い画面？

PHPページの読み込み中に白い画面が短時間点滅する原因は何ですか？今日、私が構築しているWordPressテーマでそれに気づき、これが懸念の原因であるかどうか疑問に思っています。ページが読み込まれると、ページのコンテンツが表示される前に画面が白く点滅します。これは、ページが読み込まれるたびに発生する場合もあれば、断続的にのみ発生する場合もあります。

0 投票する
13 に答える
54580 参照

css - スタイルが設定されていないコンテンツのフラッシュを排除

Web ページでのスタイルなしコンテンツ (FOUC) のフラッシュを停止するにはどうすればよいですか?

0 投票する
1 に答える
596 参照

jquery - jquery イメージ フェーダー、スタイル設定されていないコンテンツのフラッシュ

www.mymediaventure.com

画像が重なり合ってフェーダーが動き始める前に、画像がフラッシュアップするのを止めることはできません。

現時点では、最初の画像以外のすべてのインライン スタイル属性で表示を none に設定しています。

次にjquery imですべての画像を表示します。ただし、画像をロードしてから、フェードせずにそれぞれを循環し、フェードに進みます。

0 投票する
4 に答える
9905 参照

php - ページの読み込み-ページ間の白い「フラッシュ」

2つのWebサイトがあり、1つは開発中の1つです。サイトをZendFrameworkに移植しています（保守性/統合の目的で）。

元の（ライブ）サイトにはシームレスなページの読み込みがあります。ページの背景画像やナビゲーションなどを維持しながら、読み込みしてから画面のコンテンツを更新します。

移植されたサイト（開発）は、しばらくの間完全に白く「点滅」し、その後、すべてのコンテンツが同時に表示されます。

私の理解では、これはFOUC（スタイルのないコンテンツのフラッシュ）ではありません。両方のサイトのコンテンツは、常にすべてのCSSルールを使用した完全なスタイルで表示されます。2つのサイトは、レンダリングすると同じように見え、同じ画像、css、およびHTMLマークアップを使用します。唯一の違いは、1つ（開発）がZend Frameworkによって提供され、もう1つ（ライブ）が手続き型PHPによって提供されることです。

これの主な原因は何ですか？これはZFの既知のバグ/構成の問題ですか？私は以前にZFを使用せずにこの問題を抱えていましたが、解決しませんでした。

ご協力いただきありがとうございます。

0 投票する
2 に答える
1729 参照

css - Firefox 3.5 以降でのスタイルのないコンテンツのフラッシュ (FOUC)

私たちが取り組んでいる新しいリリースのために、Firefox 3.5.x+ の厄介で断続的な FOUC を克服しようとして、ここで私たちのテザーの終わりに達しました。

私たちは試しました：

  • FF で Javascript を無効にする
  • DOCTYPE を削除して Quirks モードのレンダリングを使用する
  • @import追加の CSS から への移行<link>
  • 連結のオンとオフの切り替え
  • 一度に 1 つずつ、concat から CSS ファイルを削除する
  • Firefox でローカル キャッシュをオフにする
  • 等

以前のリリースでは FOUC の問題はまったく見られなかったので、今回のリリースでこれを行いました。これまでに行った変更は次のとおりです。

  • CSS を介して提供されるすべての装飾画像に対して、データ URI で Base64 でエンコードされた画像を使用します。
  • 「フレームワーク」関連の CSS ファイルをページ固有の CSS から分離し、それらを 2 つの個別の CSS ファイルとしてバンドルする

問題を再現するには... Firefox 3.5.x または 3.6.x を使用し、次に:

  1. に向かいます: http://my.publisher-subdomain.env.yola.net/
  2. ユーザー名「stack@yola.com」とパスワード「stackoverflow」でログインします。
  3. ログインすると、 http://my.publisher-subdomain.env.yola.net/sites/にアクセスする必要があります。
  4. メイン ナビゲーションの [アカウント] リンクをクリックします。
  5. アカウント ページが読み込まれ、FOUC が表示されます。FOUC が発生しない場合は、キャッシュをクリアしてページをリロードしてください。

あなたの助けは大歓迎です! :)

アップデート：

開発環境では引き続き FOUC が発生しますが、これは FireFox のメモリが不足しているか、多くの拡張機能がインストールされている場合に限られます。遅延とレンダリング速度は、この FOUC の可視性に確実に影響します。

0 投票する
1 に答える
209 参照

jquery - Wordpressサイトのサイドバーでjqueryタブを使用して追加コンテンツの「フラッシュ」を作成する

サイドバーのjqueryナビゲーションタブを使用するワードプレスのウェブサイトを作成しました。これは本当にすばらしい追加ですが、私のクライアントは、ページが読み込まれると、3つのタブすべての右側に部分的なリストアイテムが読み込まれると不満を言っています。私は実際に見てきましたが、これまでのところIEとFirefoxでそれを行っています。私はまだテクノロジーを理解していませんが、jquery関数を使用してこの「フラッシュ」を経験した人はいますか？これがサンプルページです。

diventato
0 投票する
1 に答える
387 参照

javascript - Javascript および CSS FOUC 防止干渉印刷スタイルシート

私は自分のページで FOUC を防ぐために簡単なテクニックを使用しています。ページに「フィードバック」スライド ボタンがあり、スタイルシートで最初に display:none に設定されています。あとでJSを読み込んでスライドコードを読み込んだら、jQueryで.css('display', 'block')を適用します。それは完璧に機能します。

ただし、誰かがページを印刷すると、print.css 内の DIV に対して display:none を宣言しているにもかかわらず、スライド ボタンとそのコンテンツが印刷版に表示されます。どうすればこれを修正できますか?

0 投票する
3 に答える
3374 参照

php - 動的に生成されたjQueryUIタブでFOUCを回避する方法

jQUery UIタブを使用して複数のタブを動的に作成します。タブはforeach、次のようにビューページでを使用して作成されます（一部のcodeigniterマークアップ）。

上記のように、タブは細かく形成されています。問題は、スタイルのないコンテンツの古き良きフラッシュです。IE、Chrome、FFで発生します。

jQueryドキュメントでCSSオプションを試しましたが、機能しませんでした。

CSSスタイルをに挿入してから特定のに<head>を適用する単純なJSがありますが、これによりパネルが非表示になり、ユーザーの操作を待機します。最初のパネルは、ロード時にユーザーに表示され、上部にある他のタブと一緒に表示される必要があります。{display:none}id

jQuery UIタブでFOUCを確実に解決する方法を知っている人はいますか？それは本当に見栄えが良くなく、これを解決できない場合はタブを完全に放棄しなければならないかもしれません。

ポインタ/ロードマップは大歓迎です！


12345678910