javascript - Typekit 字体事件无助于 Flash Of Unstyled Content (FOUC)

标签 javascript html css typekit

我使用字体事件解决了 FOUC。我已经使用 visibility: hidden 隐藏了 p, h1, h2, a, span 和页面底部的一些 javascript,然后在 typekit active 事件,它将它们设置回 visible

此解决方案在我的本地环境中运行良好,在生产环境中,它似乎在重新加载页面时运行良好。但是在生产环境中逐页点击时它不起作用(截屏视频:http://screencast.com/t/m8YQwFNNsrv)

我认为不同之处在于,当从一个页面到另一个页面点击时,会利用浏览器缓存。

最佳答案

可能是竞争条件。在您到达页面底部之前,Web 字体响应正在评估(从缓存中),您的 JS 将在该页面底部执行隐藏这些元素,但到那时没有任何效果。

我总是发现让 FOUC 发生更好,而不是在网络字体最终无法加载并且您要隐藏内容的情况下解决许多边缘情况。

关于javascript - Typekit 字体事件无助于 Flash Of Unstyled Content (FOUC),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23505760/

相关文章:

javascript - div 的innerHTML 没有任何内容

javascript - 如何在 Angular 中使用原子设计?

html - 打印一个非常宽的 HTML 表格而不裁剪右侧

javascript - 基于单选按钮选择启用文本字段

CSS 清除 float

html - 水平对齐两个响应图像

javascript - AngularJS-在promise.then block 中捕获$q.reject

Javascript CSS if 语句

jquery - 如果此属性值包含在引号中引号必须匹配错误

html - 背景适合屏幕,表格不适合