問題タブ [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.
jquery - スタイルなしコンテンツのフラッシュを修正（FOUC）
@importを使用するとFOUCが発生し、ヘッダーでリンクタグまたはスクリプトタグを使用して問題を修正できるとアーティカルが言った後、アーティカルを読みました。cssファイルの@importsがなく、リンクとスクリプトタグのソリューションを試しました。私はまだ同じ問題を抱えています...
私のウェブページのレイアウトの概要を説明します
私が言ったように、私はすでに<script type="text/javascript">私のヘッダータグの最初に配置しようとしました。
最初のページの読み込み時に、FOUCが表示されます...
何か案は？
jquery - jQuery Masonry コールバックが機能しない
jQuery Masonry がポジショニング マジックを行ったときにコールバック関数を実行して、コード内のスタイル設定されていないコンテンツのフラッシュを防止しようとしています。
ただし、テストの目的で、まったく呼び出されない単純なアラートを使用しています。
明らかな何かが欠けているかもしれませんが、助けていただければ幸いです
css - サイトの初回読み込み時に CSS シートが無視される
私は親しい家族の友人のビジネスのためにこのサイトをデザインしています。私はほとんど SEO を否定していませんが、このサードパーティの電子メールフォームをサイトに追加したため、ページの 1 つで非常に厄介なことが起こっています。
ページが一瞬読み込まれると、すべての CSS が無視/上書きされ、通常の状態に戻ります。
メールフォームを削除すると正常に動作するため、メールフォームが原因で発生しています。メールフォームのコードはこちら
そして、何が起こっているのか、また他のソースコードを見る必要があるかどうかを示すページへのリンクがあります。
http://www.smithscreenprint.co.nz/contacts.html
どんな助けでも大歓迎です。
javascript - スタイルのないコンテンツのフラッシュを削除する（FOUC）
このページには、カルーセル内の画像のコレクションが表示されます。カルーセルは、 jQuery無限カルーセルプラグインによって提供されます。現在、プラグインとそれを呼び出すJSコードがに読み込まれてい<head>ます。
カルーセルコードが開始される前に、画像自体だけを表示するスタイルなしのコンテンツのフラッシュがあります。これを防ぐために私にできることはありますか？たとえば、カロセルが初期化されるまで画像を非表示にしますか？
FOUCはIEで特に悪いですが、Firefoxでも発生します。
jquery - スタイルのないコンテンツのフラッシュ。ページが読み込まれる前にすべてのカスタム フォントを非表示にする方法は?
私はFOUCと戦おうとしています。私のサイトはカスタム フォントに大きく依存しています。フォントが読み込まれるまでページを表示しないようにしましたが、オペラでは、ページが変更されるたびに少しFOUCが発生します。
そこで、追加の手段を適用して、カスタム フォントを使用するすべてのテキストを非表示にすると考えました。css ファイルにあるすべての div、スパンを選択してfont-family: CustomFont;、フォントが読み込まれる前にテキストを表示しないようにする簡単な方法はありますか?
編集:または、0.5秒だけ遅らせますか?
javascript - スタイルのないコンテンツのフラッシュを回避するための戦略の比較 (fouc)
Cookie を使用して CSS を制御する必要があります。
- ユーザーがすべてのページに含まれるコントロールを介してスタイルを選択すると、その設定は、ユーザーが変更するか、Cookie の有効期限が切れるまで保持する必要があります。
- ユーザーが戻ったときに、デフォルトのスタイルも FOUC も発生しないはずです。
- jquery やその他のライブラリやフレームワークはありません
- Windows 上の IE、Firefox、Chrome、Opera、Safari で動作します。MacOS の最後の 4 つ。iOS の Safari。Linux 上の Firefox および Chrome)
- 特定の @class 属性に使用される Web フォントをバインドする
- ボタンはテキスト値をシュリンクラップします
- スタイルを切り替えて Cookie の状態を表示するためのチェックボックス
私の最初の戦略は、<body> 要素に onload ハンドラーを設定することでした。少なくとも 2 つの他のアプローチについての議論を見てきました。
document.writeページの構築中に <head> 内のスタイルシートへの <link> を作成します。- sitewizard.comは一連の小さなスタイルシートを作成し、ユーザーが一度に 1 つずつ設定してアクティブにできるようにします。
コーディングと保守が容易で、サポートする必要のあるブラウザーで必要な機能を提供する戦略を選択するためのアドバイスをいただければ幸いです。
performance - WPは、ページを表示する前にサーバー側でページのレンダリングを完了しますか？
私のプロジェクトの静的なhtmlページには、動的に変更されたjavascriptのコンテンツがあり、FOUC（Flicker of Unstyled Content）が発生します。そこで、デフォルトでコンテンツを非表示にし、DOMの準備ができたら表示を表示に切り替えました。
静的なhtmlページはローカルドライブで非常に高速にレンダリングされるため、非表示状態と表示状態の間の時間差は明らかではありません。
ただし、プロジェクトがWordPressと統合されてリモートサーバーに配置された後は、ページのレンダリングが少し遅くなるため、時間のギャップが少し明確になります。
ハイパーリンクをクリックしてページの表示をリクエストするとき、WordPressでサーバー側のページの再作成を完了してから、ページを表示したいと思います。1〜2秒待っても大丈夫です。WPはそれを行うことができますか？
javascript - jQueryUIアコーディオンとJavaScriptの本文の読み込みを使用してFOUCを防止します
私の現在の問題は、jQuery UIアコーディオンプラグインを使用したFOUCと、html-body-tagの最後にロードされているjavascriptに悩まされていることです。頭にJavaScriptを含めると、すべてが正常に読み込まれます。html5boilerplateは、ページの読み込みが遅くならないように、bodyタグの最後にすべてのJavaScriptを配置することをお勧めします。
display: noneまた、アコーディオンを初期化した後、ドキュメントの準備ができた状態でアコーディオンを試してみましたshow()が、それも満足のいくものではありません。何か案は？
javascript - （jquery）ページの読み込み中にdivが表示されないようにする
www.rambocats.comにアクセスすると、ページが読み込まれると、この中央下のdivが1〜2秒間表示され、その後消えます。（Divはピンクの文字で「ギャラリーII」と言います）。ページの約2/3までスクロールしたときにのみ表示されるはずです。初期ロード時に表示されないようにするにはどうすればよいですか？
jQueryは次のとおりです。