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

html5 • • 问答

我有一个标题，里面有一个导航菜单。导航菜单的几个菜单链接样式为按钮。出于某种原因，按钮的样式仅在页面加载后才会出现。

屏幕录制：https : //streamable.com/k5fhmh

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

这可能是什么原因造成的？

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

回答

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

您可以检查：

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

解决方法的其他提示：

(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技巧。 com/really-dislike-fout-font-display-optional-might-jam/

以上是元素样式仅在页面加载后出现的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>