V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
lyragosa
V2EX  ›  程序员

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

  •  
  •   lyragosa · 2015-02-24 15:08:41 +08:00 · 2863 次点击
    这是一个创建于 3554 天前的主题,其中的信息可能已经有所发展或是发生改变。
    我仿照v2ex的自定义css功能,给我的网站也加了一个可以让用户自定义css这样的设置

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

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

    以后有空整理一下发到github

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

    经过测试了一下,可能是因为我的页面读入速度慢的原因?我把css放在body的最前面就不会出现闪动了……
    dring
        8
    dring  
       2015-02-24 15:54:22 +08:00
    @lyragosa
    建议看看这篇文章 http://news.cnblogs.com/n/178402/
    有可能有所帮助
    typcn
        9
    typcn  
       2015-02-24 17:33:44 +08:00 via iPhone
    将用户的css输出到内容前面呗
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5600 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 36ms · UTC 05:52 · PVG 13:52 · LAX 21:52 · JFK 00:52
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.