问题标签 [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 - 修复无样式内容的 Flash (FOUC)
我已经阅读了一篇又一篇文章，告诉我在使用 @import 时会发生 FOUC，并且您可以在标题中使用链接或脚本标签来解决问题。我没有用于 css 文件的 @imports，并且我尝试了链接和脚本标记解决方案。我还是有同样的问题...
我将概述我的网页布局
就像我说的那样，我已经尝试将其放在<script type="text/javascript">标题标签的开头。
在初始页面加载时，我看到一个 FOUC ......
有任何想法吗？
jquery - jQuery Masonry 回调不起作用
我试图在 jQuery Masonry 完成其定位魔术时执行回调函数，以防止在我的代码中出现无样式内容。
但是，出于测试的目的，我使用了一个根本不调用的简单警报。
我可能遗漏了一些明显的东西，但任何帮助将不胜感激
css - 网站最初加载时忽略 CSS 表
我正在为一个亲密的家庭朋友企业设计这个网站，我几乎不会减去 SEO，但是我在其中一个页面上发生了一件非常烦人的事情，因为我已经在网站上添加了这个第 3 方电子邮件表单。
当页面加载一瞬间，所有的 CSS 都被忽略/覆盖，然后它恢复正常。
它的发生是因为电子邮件表单，因为当我删除它时，它工作正常。这是电子邮件表单代码
这是一个指向页面的链接，向您展示正在发生的事情，以及您是否需要查看任何其他源代码。
http://www.smithscreenprint.co.nz/contacts.html
任何帮助将不胜感激。
javascript - 删除无样式内容的闪存 (FOUC)
此页面显示轮播中的图像集合。轮播由jQuery 无限轮播插件提供。目前，插件和调用它的我的 JS 代码加载在<head>.
在轮播代码启动之前，会出现一些仅显示图像本身的无样式内容。我可以做些什么来防止这种情况发生，例如在轮播初始化之前隐藏图像？
FOUC 在 IE 中尤其糟糕，但也出现在 Firefox 中。
jquery - 无样式内容的闪光。如何在页面加载之前隐藏所有自定义字体？
我正在努力对抗 FOUC。我的网站严重依赖自定义字体。我已经让它在字体加载之前不显示页面，但是在歌剧中我仍然在每次页面更改时都会得到一些 FOUC。
所以，我想我会应用额外的措施并隐藏所有使用自定义字体的文本。有没有一种简单的方法可以选择font-family: CustomFont;css 文件中的所有 div、span 并使它们在字体加载之前不显示文本？
编辑：或者只是延迟0.5秒？
css - CSS preprocessor with anti-FOUC support
FOUC is a common user experience problem for sites with a lot of CSS (especially after you start combining your CSS files), and the common solution is to separate important layout rules in a small standalone file which is loaded first. That leads to code which is hard to read and maintain because related rules are at very distant places. I am wondering if there is any CSS preprocessor which supports separating code into different files? That is, you would write something like
and .main-content and .main-content h1 end up in different files. (Or maybe the same on a per-rule level.)
javascript - 比较避免无样式内容闪现的策略 (fouc)
我需要用 cookie 控制 CSS：
- 当用户通过我在所有页面上包含的控件选择样式时，该设置需要持续存在，直到用户更改它或 cookie 过期
- 用户返回时不应出现默认样式或 FOUC
- 没有 jquery 或其他库或框架
- 适用于 Windows 上的 IE、Firefox、Chrome、Opera、Safari；MacOS 上的最后四个；iOS 上的 Safari；Linux 上的 Firefox 和 Chrome）
- 将使用的网络字体绑定到特定的@class 属性
- 按钮收缩其文本值
- 用于切换样式和显示 cookie 状态的复选框
我的第一个策略是在 <body> 元素上设置一个 onload 处理程序。我已经看到至少有两种其他方法的讨论：
document.write在构建页面时，在 <head> 中创建指向样式表的 <link>。- sitewizard.com创建一组小型样式表，并让用户一次设置一个以激活。
我将不胜感激有关选择易于编码和维护的策略的建议，并在我需要支持的浏览器中提供我需要的功能。
performance - WP 在显示页面之前是否在服务器端完成页面的渲染？
我项目的静态 html 页面有 javascript 动态修改的内容，这会导致 FOUC（无样式内容闪烁）。所以我默认让内容不可见，并在 DOM 准备好后将显示切换为可见。
静态 html 页面在我的本地驱动器上渲染得非常快，因此不可见状态和可见状态之间的时间差距并不明显。
但是，在项目与 WordPress 集成并放到远程服务器上后，页面渲染变得有点慢，因此时间差距变得更加明显。
当我单击超链接请求查看页面时，我希望 WordPress 在服务器端完成页面的重新渲染，然后向我显示该页面。等待 1 或 2 秒是可以的。WP能做到吗？
javascript - 使用 jQuery UI Accordion 和 javascript 在正文中加载防止 FOUC
我目前的问题是我的网页使用 jQuery UI Accordion 插件和在我的 html-body-tag 末尾加载的 javascript 遭受 FOUC 的影响。当我在头部包含 javascript 时，一切都加载得很好。html5boilerplate 建议将所有 javascript 放在 body-tag 的末尾，以避免页面加载缓慢。
在我初始化手风琴后，我还尝试display: none了手风琴和show()它在文件上的准备，但这也不令人满意。有任何想法吗？
javascript - (jquery) 防止 div 在页面加载期间显示
如果你转到 www.rambocats.com，当页面加载时，你会看到这个底部中心的 div 显示一两秒钟，然后消失。（Div 用粉色字母表示“Gallery II”）。它应该只在您向下滚动到页面的大约 2/3 时才会出现。如何防止它在初始加载期间显示？
这是jQuery：