css - 元素样式仅在页面加载后出现
问题描述
我有一个带有导航菜单的标题。导航菜单的几个菜单链接被设计为按钮。由于某种原因,按钮的样式仅在页面加载后出现。
录屏:https ://streamable.com/k5fhmh
每次页面加载按钮时都会执行此“动画”,但我无法弄清楚是什么原因造成的。
这可能是什么原因造成的?
我希望按钮的样式立即出现,没有动画或延迟。
解决方案
似乎按钮的样式是由页面加载后仍在加载的进程添加的。但是我也通过使用模块的预期 css 延迟效果来实现这一点。
您可以检查:
- 是否所有样式(甚至按钮样式)都包含在一个主 css 文件中,而不是包含
imported
在辅助样式表文件中。 - 确保首先加载带有按钮样式的样式表文件(= 首先是所有 css 文件,在调用第一个 JS 脚本之前)。它应该是 head 中第一个要加载的文件。
- 如果按钮样式在辅助样式表中,则将它们移动到主要加载的样式表中。
- 按钮修复的类是否设置在 html 文件中(即 =
<a class='button stylingClass" href="...">Get Started</a>
),之后未添加,即由 JS 和/或外部模块添加。 - 按钮 html 修复是否设置在 html 文件中,之后未添加,即由 JS 和/或外部模块添加。
- 按钮的样式是由动画或延迟添加的,即创建额外的注意力。样式应该设置为固定的,没有动画或过渡延迟。
- 有时外部使用的字体会导致重新渲染。如果您停用字体并测试行为,您可以检查这一点。
- 确保按钮的背景/内容没有被需要加载的图像设置样式
解决方法的其他提示:
(A) 如果它是由模块引起的(即模块添加了额外的样式)并且您无法更改模块加载过程,您可以将样式 ADDITIONAL 添加到您的主 css 文件或将其写入您的样式部分<head>
. 加倍的代码不会影响页面的工作。
例子:
<head>
<style>
a.buttonClass {
... your button css ...
}
</style>
</head>
(B) 如果它是由字体引起的,您可能想查看以下信息:
https
://www.freecodecamp.org/news/web-fonts-in-2018-f191a48367e8/https://css-tricks。 com/really-dislike-fout-font-display-optional-might-jam/
推荐阅读
- gramex - 面对“Uncaught SyntaxError: Unexpected token '{'”
- data-binding - 发送消息后 NativeScript 空文本字段
- firebase-mlkit - 如何在 react native 中从 ml-vision 迁移到 Mlkit?
- java - org.springframework.beans.factory.UnsatisfiedDependencyException:创建名为“userServiceImpl”的bean时出错
- gitlab - 如何在 .gitlab-ci.yml 中获取 MR 编号?
- python - 我想将默认值应用于 python tkinter 中的程序
- c - 负符号 8 位整数的十六进制表示
- ignite - 点燃分区的最大大小限制和值是多少
- react-admin - 如何在 react-admin DateInput 中禁用日期
- ajax - Ajax 加载更多和 ACF 分类