Question

我有（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使用与#sp-footer文件中为template.css设置的背景颜色相同的背景颜色。 （我知道还有其他方法来设置颜色，但我正在尝试使用jquery，所以请耐心等待我！）。

这是我的jquery代码，有效。

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

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

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

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

我可以采取哪些措施来避免#sp-top-bar中的这种初始背景色闪烁吗？

由于

Answer 1

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

<强> CSS

#sp-top-bar {
  display: hidden
}

<强> JS

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

Answer 2

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

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

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

希望对你有所帮助。

Answer 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'
  })
});

Answer 4

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

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

但是复制一行css的工作很多。

编辑：

另一个角度是在页面加载后用ajax加载css，但是没有任何样式，这可能比闪烁更糟糕。

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

在CSS之后加载Jquery

4 个答案: