V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
cqcn1991
V2EX  ›  问与答

[前端] 怎么做一个 Native App 那样的 welcome page?

  •  
  •   cqcn1991 · 2015-02-25 10:30:22 +08:00 · 2196 次点击
    这是一个创建于 3560 天前的主题,其中的信息可能已经有所发展或是发生改变。

    打开web app(网站)时,有时需要等一阵
    想像native app那样设计一个welcome page,不知道有啥办法?
    具体来说,就是把一部分html css js最先载入,然后其他的再慢慢载入。

    求教了~

    8 条回复    2015-02-25 15:23:00 +08:00
    teavoid
        1
    teavoid  
       2015-02-25 10:39:56 +08:00
    大概思路:好像可以用iframe,主iframe加载简单的欢迎页面,然后异步启动次iframe的加载,等次iframe加载完成之后,将其铺满界面,或者直接用次iframe的内容替换主iframe的内容。。
    justfindu
        2
    justfindu  
       2015-02-25 10:42:31 +08:00
    document.ready.function(){remove welcomePage}
    cqcn1991
        3
    cqcn1991  
    OP
       2015-02-25 10:45:31 +08:00
    @justfindu 怎么保证welcome page最先载入?
    loading
        4
    loading  
       2015-02-25 10:57:21 +08:00
    伪代码:
    loading:
    #welcome {display:block}
    #main {display:none;}



    $.ready{
    #welcome{display:none;}
    #main {display:block}

    }
    justfindu
        5
    justfindu  
       2015-02-25 13:11:08 +08:00
    @cqcn1991 welcomePage 作为覆盖层 而且welcomePage应该是越简单越好 如果你的welcomePage 都比主页面载入慢了 还要他何用...放在body最开始...
    lincanbin
        6
    lincanbin  
       2015-02-25 14:14:02 +08:00
    SplashScreen

    你可以将所有JavaScript、CSS等等以非阻塞方式异步载入,然后页面就可以直接显示SplashScreen,等所有外部资源载入完毕,回调函数关闭SplashScreen。
    cqcn1991
        7
    cqcn1991  
    OP
       2015-02-25 15:06:42 +08:00 via iPhone
    @lincanbin 可以求教一下"非阻塞式”异步吗?有什么相关的教程可以看?是js的ajax吗?
    lincanbin
        8
    lincanbin  
       2015-02-25 15:23:00 +08:00 via Android
    @cqcn1991 在页面加载完毕后,再在网页中插入js和CSS就不会阻塞splashscreen的显示。这跟浏览器渲染的顺序有关。
    你可以参考
    https://github.com/lincanbin/Carbon-Forum/blob/master/static/js/global.js
    里的loadScript函数
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2991 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 13:02 · PVG 21:02 · LAX 05:02 · JFK 08:02
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.