元素样式仅在页面加载后出现

Question

我有一个带有导航菜单的页眉。导航菜单的几个菜单链接被设计为按钮。出于某种原因，按钮的样式仅在页面加载后出现。

每次页面加载时，按钮都会执行此“动画”，但我不知道是什么原因造成的。

可能是什么原因造成的？

我希望按钮的样式立即出现，没有动画或延迟。

Answer 1

按钮的样式似乎是由页面加载后仍在加载的进程添加的。但是我也通过使用过的模块的预期 css 延迟效果得到了这个。

您可以查看：

是否所有样式（甚至按钮的样式）都包含在一个主 css 文件中，而不是 imported 在辅助样式表文件中。
确保首先加载带有按钮样式的样式表文件（=首先加载所有 css 文件并且在调用第一个 JS 脚本之前）。应该是head中第一个注意加载的文件。
如果按钮样式在辅助样式表中，请将它们移动到主要加载的样式表中。
按钮的类是否在 html 文件中设置（即 = <a class='button stylingClass" href="...">Get Started</a>）并且之后没有添加，即由 JS and/or 由外部模块添加.
按钮 html 是否在 html 文件中修复设置并且之后没有添加，即由 JS and/or 通过外部模块添加。
按钮的样式是由动画或具有延迟的过渡添加的，即创造额外的注意力。样式应设置为固定，没有动画或过渡延迟。
有时外部使用的字体会导致重新渲染。如果停用字体并测试行为，则可以检查此项。
确保按钮的 background/content 没有被需要加载的图像设置样式

解决方法的其他提示：

(A) 如果它是由模块引起的（即模块添加了额外的样式）并且您无法更改模块加载过程，您可以将样式添加到主 css 文件或将其写入 <head> 中的样式部分。双重代码不会影响您页面的工作。

示例：


<head>

   <style>

      a.buttonClass {
         ... your button css ...
      }

   </style>

</head>

Element style only appears after page loads up