为什么Chrome浏览器中会出现无样式文本的 Flink ？

2w2cym1i 于 2023-03-10 发布在 Go

关注(0)|答案(2)|浏览(151)

我有一个HTML文档，里面有各种各样的脚本、样式表和谷歌字体等，这是 * 大多数 * 优化，以防止显示任何非样式的内容。

<head>
        <title>my site</title>
        <link rel="stylesheet" media="screen" href="/static/index.css">
        <script defer src="/static/shared.js"></script>
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Wire+One&display=swap" rel="stylesheet">
        <style type="text/css">.fouc-hidden {display: none}</style>
        <script type="text/javascript">
          document.querySelector("html").classList.add("fouc-hidden")
          window.onload = () => {
            document.fonts.ready.then(() => {
              setTimeout(() => {
                console.log('done waiting')
                document.querySelector("html").classList.remove("fouc-hidden")
              }, 5000)
            })
          }
        </script>
      </head>
      <body>
        /* there is text stuff here, I thought that was assumed */
      </body>

所以我：
1.请求所有字体样式，其它样式表和脚本
1.设置.fouc-hidden类的样式
1.将该类添加到html元素中
1.等待window.onload和document.fonts.ready，然后再等待5秒钟，当我删除fouc-hidden类时，* 仍然 * 有错误字体的文本 Flink 。
注意所有其他的样式（特别是颜色）在我展示页面内容的时候就已经应用了。也就是说，这似乎不是一个普通的无样式内容问题，而是一个特别的无样式字体问题
为什么会发生这种情况（特别是Chrome），有什么办法吗？
我没有使用任何框架，所以请在香草js的任何解决方案！

google-chrome

来源：https://stackoverflow.com/questions/75538850/why-is-there-a-flash-of-unstyled-text-in-chrome

2条答案

按热度按时间

m1m5dgzv1#

.fouc-hidden在脚本添加之前不会被应用，因此在脚本隐藏之前，您将显示未样式化的html。您需要将其添加到原始html中，以便它从一开始就在那里，然后随脚本一起删除：

<html class="fouc-hidden">
  <head>
    <title>my site</title>
    <link rel="stylesheet" media="screen" href="/static/index.css">
    <script defer src="/static/shared.js"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Wire+One&display=swap" rel="stylesheet">
    <style type="text/css">.fouc-hidden {display: none}</style>
    <script type="text/javascript">
      window.onload = () => {
        document.fonts.ready.then(() => {
          setTimeout(() => {
            console.log('done waiting')
            document.querySelector("html").classList.remove("fouc-hidden")
          }, 5000)
        })
      }
    </script>
  </head>
  <body>
    ....
  </body>
<html>

赞(0）回复(0）举报 2023-03-10

7d7tgy0s2#

我欠@MarkSchultheiss的：
将.fouc-hidden的样式声明更改为{visibility: hidden}（而不是{display: none}似乎已经解决了这个问题

赞(0）回复(0）举报 2023-03-10