如何在加载网页时让文本与其他元素同时显示？

如何解决如何在加载网页时让文本与其他元素同时显示？

我遇到了一个问题，我的网站加载时间的第一秒显示了我的横幅元素（表单字段和背景图片），但文本显示的时间要晚得多。

文本使用自定义字体，称为 Circular Std。我在头上添加了以下预加载链接：

<link rel="preload" as="font" type="font/woff2" crossorigin="" href="https://example.com/wp-content/uploads/2021/01/CircularStd-Bold.woff2">
<link rel="preload" as="font" type="font/woff2" crossorigin="" href="https://example.com/wp-content/uploads/2021/01/CircularStd-Medium.woff2">
<link rel="preload" as="font" type="font/woff2" crossorigin="" href="https://example.com/wp-content/uploads/2021/01/CircularStd-Book.woff2">

不过，文本显示的时间比其他所有内容都要晚。

基本上，我想知道如何避免这种情况：

编辑/更新：

感谢下面的答案，但对我来说，问题恰好是由于名为 WP Rocket 的 wordpress 插件中的配置选项造成的。我有 Optimize CSS Delivery 选项，不仅可以内联关键 CSS，还可以通过执行以下操作显然延迟 CSS 的加载：

<link rel="preload" href="https://example.com/wp-content/uploads/thefile.css" data-rocket-async="style" as="style" onload="this.onload=null;this.rel='stylesheet'" type="text/css" media="all">

因此，我从中感受到了无样式内容 (FOUC) 的闪现。

解决方法

您可以通过页面加载事件触发的转换来实现。开始时主体完全透明，然后在页面加载完成后淡入。

document.addEventListener("DOMContentLoaded",function() {
  document.body.classList.add("loaded");
});

body {
  opacity: 0;
  transition: all 1s;
}

body.loaded {
  opacity: 1;
}

这看起来类似于这里讨论的问题：How come my custom font wont show when I write stuff with fillText()?

在现代浏览器上，您可以延迟显示任何内容，直到您的字体加载完毕。在这种情况下，肯定是字体加载导致了问题，您可以执行此类操作（基于 MDN）

将 body 样式设置为不透明度：0 然后：

let f = new FontFace('myCusomFont','url(myCustomFont.ttf)');

f.load().then(function() {
  // Ready to use the font
  document.body.style.opacity = '1';
});

但是，您需要考虑如果字体从未加载会发生什么（例如，您使用的任何服务器都已关闭，因此可能会在一些合理的超时时间内放弃字体加载）以及您是否想要显示在加载时向用户展示一些东西，只是为了让他们感到有些事情正在发生。