如何克服CSS / JS全角背景色“闪烁”

Question

因此，这是我在建立自己的新网站时遇到的“问题”。

它利用WP Bakery的Visual Composer Row小部件，并且在CSS / JS插入以将标题行从default扩展到stretch时发生。 因为标题行具有背景色，所以初始标题看起来像this。但是，当CSS / JS开始扩展该行时，它会“闪烁”，看起来像this。

这显然看起来很不专业，并且想知道可以建议我做些什么。

不胜感激。

谢谢！

Answer 1

这类似于其他FOUC（未样式化内容的闪烁）。您有几种选择。

一种方法是将stretch属性专门添加到相关元素。基本上采用：.stretch { width: 100%; margin: 0 auto /* … whatever */ }并将这些样式应用于您的元素，最好按ID：#my-header { width: 100%; margin: 0 auto /* … whatever */ }并将其放在您的标头中，以便立即将它们加载到您的定制器中。

另一种选择是找到另一种手动将stretch类添加到该元素的方法。我对VC不够熟悉，无法举个例子（不过，老实说，我创建的几个使用VC的网站似乎都没有这个问题？）。这样做的好处是，您不需要复制CSS属性，也不需要等待JS应用该类，直到加载整个页脚才可能发生。

另一个选择是太普遍的（可能是不必要的/讨厌的）“全页加载器”。如果我是您，这是我会避免的选项，但是您可以在全屏白页中放入徽标和微调框，当加载整个标记或获取所有资源时，该微调框将消失。根据我的有限测试，这会延迟用户访问您的网站的速度，并且大多数用户宁愿看到FOUC而不是加载屏幕。