Jquery Loading CSS之后

我有（Joomla）一个带有以下元素的网页;Jquery Loading CSS之后

<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这个初始背景颜色闪光灯？

感谢

来源

2017-03-02 johnny_s

你介意为此使用'css'解决方案吗？或者你想用'script'来制作它？ –

@VilasKumkar我想用jquery，谢谢。 –

，直到一切都被加载

CSS

#sp-top-bar { 
    display: hidden 
}

你可以尝试隐藏顶部栏JS

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

来源

2017-03-02 12:35:10 Ygg

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

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

（我用灰色f6f6f6的假想树荫）

希望帮助你。

来源

2017-03-02 12:32:53

你不能右键单击 - >检查元素以获得它在css中设置的实际bg颜色值吗？ –

是的，我可以@captain theo但问题是template.css文件是在别处动态生成的。我需要'＃sp-top-bar'来自动呈现'template.css'中设置的背景颜色，而不需要我的任何人工干预。希望这是有道理的。谢谢 –

我明白了......好吧，我想你让我在这里得到警戒:)我不认为我可以提供答案... Joomla代码可能会相当（不必要地）复杂有时... –

试试这个

$("#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' 
    }) 
});

来源

2017-03-02 12:49:31

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

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

但是，这是复制一行CSS的工作很多。

编辑：

另一个角度加载与阿贾克斯的CSS在页面加载后，却再没有什么会病急乱投医，这可能比闪烁更糟糕。

你也可以显示一个完全空白的页面，直到所有的脚本都已经运行，但这也不是完美的，因为它是一个'缓慢加载'页面。

来源

2017-03-02 12:52:31 Shilly

Jquery Loading CSS之后

回答

相关问题