問題タブ [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.
fouc - Google サイトでスタイルのないコンテンツ (FOUC) のフラッシュを回避するにはどうすればよいですか
Google サイトの HTML ボックス内に、いくつかのカスタム HTML、CSS、および jQuery を配置しました。ただし、ページが読み込まれると、読み込みが完了するまで、フォーマットされていないコンテンツが数秒間表示されます。以下を追加しようとします：
html { 可視性: 非表示; }
後で jQuery で再びオンにすると、Google サイト内では機能しないようです。
誰か別の提案はありますか？
css - webpack で読み込んだ css を使用しているときに FOUC を停止する方法
webpack を使用しているときにエントリ ポイント内に css をロードすると、FOUC が発生します。css が webpack によって読み込まれないように削除し、それを通常のリンクとして html ファイルに含めるだけで、FOUC の問題は解消されます。
注: これはブートストラップ フレームワークだけでなく、Foundation と Materialize でも同じ結果でテストしました。
以下に投稿されたコードは、Bootstrap を使用した私の問題の単なるテスト例です。
HTML コード
bootstrap.js のメイン エントリ ポイント
webpack.config.js