CSS之后的Jquery加载答案

【问题标题】：Jquery Loading After CSSCSS之后的Jquery加载
【发布时间】：2017-07-22 04:31:06
【问题描述】：

我有 (Joomla) 一个包含以下元素的网页；

<section id="sp-top-bar">
  <!-- html content -->
</section>

<section id="sp-footer">
  <!-- html content -->
</section>

#sp-top-bar 的样式通过 custom.css - 带有 background-color: blue。
#sp-footer 的样式通过 template.css - 带有 background-color: green。

我正在使用 jquery 来强制 #sp-top-bar 使用与 template.css 文件中为 #sp-footer 设置的背景颜色相同的背景颜色。 （我知道还有其他方法可以设置颜色，但我正在尝试使用 jquery，所以请多多包涵！）.

这是我的 jquery 代码，可以使用。

jQuery(function ($) {
    var brand = $('#sp-footer');
    var bg = brand.css('background-color');
    $("#sp-top-bar").css({
        backgroundColor: bg
    })
});

我的 jquery 代码在文档的 <head> 中，在我的 template.css 文件之后。

当我的页面加载时，#sp-top-bar 最初会闪烁蓝色一瞬间，然后成功变为#sp-footer 绿色。

我查看了源代码，我的 template.css 文件正在加载之前我的 jquery 代码 - 大概这是问题所在？

我可以做些什么来避免#sp-top-bar 中出现这种初始背景颜色闪烁？

谢谢

【问题讨论】：

您介意为此使用css 解决方案吗？或者您想使用script 来实现它？
@VilasKumkar 我想使用 jquery，谢谢。

标签： javascript jquery html css

【解决方案1】：

您可以尝试隐藏顶栏，直到所有内容都加载完毕

CSS

#sp-top-bar {
  display: hidden
}

$("#sp-top-bar").css({
    backgroundColor: bg,
    display: 'block'
})

【讨论】：

【解决方案2】：

在 jQuery 中，您可以像这样设置背景颜色：

$("#sp-top-bar").css('background-color','#f6f6f6');

（我使用了一个虚构的灰色 f6f6f6）

希望对你有所帮助。

【讨论】：

你不能右键单击 -> 检查元素以获取在 css 中设置的实际 bg 颜色值吗？
是的，我可以@captain theo，但问题是 template.css 文件是在其他地方动态生成的。我需要#sp-top-bar 自动采用template.css 中设置的背景颜色，而无需我进行任何手动干预。希望这是有道理的。谢谢
我明白了......好吧，我想你让我措手不及 :) 我想我无法提供答案...... Joomla 代码有时可能非常（不必要）复杂...
@johnny_s 如果您可以追溯到生成 css 文件的位置，并为“#sp-top-bar”添加额外规则...
@johnny_s 另一种 (jQuery) 方法是“获取”已动态分配的当前背景颜色，并将其应用于“#sp-top-bar”。查看此帖子：stackoverflow.com/questions/5999209/…

【解决方案3】：

试试这个

$("#sp-top-bar").hide();
$(document).ready(function(){
  var brand = $('#sp-footer');
  var bg = brand.css('background-color');
  $("#sp-top-bar").css({
    backgroundColor: bg,
    display: 'block'
  })
});

【讨论】：

【解决方案4】：

在这方面使用 JQuery 有点困难，因为 JQuery 必须等待 DOM 元素加载到页面中才能更改它。所以你通常会有 flash 效果，因为 header 将使用 css 中的默认样式。

在 css 中，您可以在呈现标题之前覆盖默认样式。但是如果它必须是 JQuery，那么下面描述的隐藏技巧可能会起作用。或者，您可以插入一个绝对定位的正确颜色的标题，完全覆盖标题，并在页面加载后再次将其删除。

但是复制一行 css 需要做很多工作。

编辑：

另一个角度是页面加载完成后用ajax加载css，但是没有样式，可能比flash更糟糕。

您也可以在所有脚本运行之前显示一个完全空白的页面，但这也不是完美的，因为它被视为“缓慢加载”页面。

【讨论】：