V2EX = way to explore
V2EX 是一个关于分享和探索的地方
Sign Up Now
For Existing Member  Sign In
• 请不要在回答技术问题时复制粘贴 AI 生成的内容
lyragosa
V2EX  ›  程序员

关于动态改变 css 导致页面闪动的问题

  •  
  •   lyragosa · Feb 24, 2015 · 3232 views
    This topic created in 4087 days ago, the information mentioned may be changed or developed.
    我仿照v2ex的自定义css功能,给我的网站也加了一个可以让用户自定义css这样的设置

    自定义的css是保存在数据库的一个字段,每次刷新页面的时候读出这个字段,然后用<style>xxx</style>包络在页面尾部(和v2ex的逻辑一样)

    但是实际效果是,每次刷新页面,都会一瞬间变成原来的css,然后过0.x秒才变成自定义的css(有一个很明显的闪动效果),非常影响用户体验,而v2ex自定义之后不会出现这种情况。所以想请教一下如何做到让用户自定义的css不出现页面闪动。
    Supplement 1  ·  Feb 24, 2015
    问题已经解决,花了点时间写了个库,将页面中所有的css全部按顺序上提到head的最后部。

    以后有空整理一下发到github

    感谢大家。
    9 replies    2015-02-24 17:33:44 +08:00
    blahgeek
        1
    blahgeek  
       Feb 24, 2015
    放到<head>里面?
    dring
        2
    dring  
       Feb 24, 2015
    @blahgeek 说的对
    CSS样式无论是否行内,一定要放<head>里,不然页面都会重新渲染。
    lyragosa
        3
    lyragosa  
    OP
       Feb 24, 2015
    @dring
    @blahgeek
    但如果页面后面又出现了css文件,放在head里面会被后面覆盖掉吧。
    我想让用户的css始终最后加载
    dring
        4
    dring  
       Feb 24, 2015
    @lyragosa
    1、如果是head里又出现了CSS,style放head内最后就行
    2、如果CSS在body中加载,本身就是不规范的,大的网站理论也不会这么做
    lyragosa
        5
    lyragosa  
    OP
       Feb 24, 2015
    @dring 唔,这样的话,v2ex是如何做到在body最后引入内联css,又不重新渲染页面的呢……
    dring
        6
    dring  
       Feb 24, 2015
    @lyragosa 目前这个style是后加载的还是和CSS同步输出的呢
    lyragosa
        7
    lyragosa  
    OP
       Feb 24, 2015
    @dring 同步输出,在php输出页面的时候就已经有了,不是js后拉进去的。

    经过测试了一下,可能是因为我的页面读入速度慢的原因?我把css放在body的最前面就不会出现闪动了……
    dring
        8
    dring  
       Feb 24, 2015
    @lyragosa
    建议看看这篇文章 http://news.cnblogs.com/n/178402/
    有可能有所帮助
    typcn
        9
    typcn  
       Feb 24, 2015 via iPhone
    将用户的css输出到内容前面呗
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   2804 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 34ms · UTC 14:12 · PVG 22:12 · LAX 07:12 · JFK 10:12
    ♥ Do have faith in what you're doing.