由于页面打开的时间过长,想写个页面载入中的功能,有没有好一点的例子?

解决方案 »

  1.   

    可以将要打开的页面 放到 iframe 中,等iframe加载完毕再显示出来。老虎传送门
      

  2.   

    楼上用iframe效果我感觉应该是可以实现的,但是我觉得跟LZ说的页面打开的时间过长,可能时间更长,时间过长可能的情况有很多,其一就是加载的功能或者是数据过多造成的,我也解决不了
    提供两个页面加载的方法
    //页面加载
    $(function () {
            //加载内容
        });或者
    function test(){
        //功能
    }window.onload = test;
      

  3.   

    老虎的方式+1,注意iframe开始要隐藏起来,并且在开始页面实现一个加载中的图标。
      

  4.   

    你的页面是用的什么?ajax、structs标签、javabeen,依情况而定、、
      

  5.   

    用ajax吧 请求开始 loading 
      

  6.   

    所有内容放到一个总容器中,容器隐藏,window.onload中显示容器信息就行了<div id="loading">正在努力加载中...</div>
    <div id="dvContainer" style="display:none">
    所有的内容放到这里来
    <img src="http://www.coding123.net/imgdesign/20120928/20120928164213345.jpg"/>
    </div>
    <script>
    window.onload=function(){
      document.getElementById('loading').style.display='none'
      document.getElementById('dvContainer').style.display='block'
    }
    </script>
      

  7.   

    很多人都回复的挺好,但我认为缺少点睛之笔把这个事情说的透彻的. Extjs文档页面就有loading效果,楼主可以查看一下它的源码,然后在对照我下面的剖析.
    要做到简单的loading效果,页面的代码结构应该是这样的:
    <!doctype html>
    <html>
    <head>
    <title>The title</title>
    <显示loading效果必须的css,用来设置loading图标的样式和蒙版层样式, 它要小而精悍, 加载速度要足够快, />
    </head>
    <body onload="把蒙板层和loading图标层干掉">
    <div><img src="loading.gif" />这里是loading图标层, loading图标的体积要足够小, 加载速度要足够快</div>
    <div class="mask">这是一个蒙板层, 蒙板层的作用就是把真正的body部分先蒙住,等全加载之后再显示,蒙板层做法很简单, position=absolute, left=0, top=0, height='full height', width='full width', z-index比图表层的小1</div>
    <div>
    下面就是你的需要长时间加载的主体内容了.
    </div>
    </body>
    </html>上面的做法有时候会产生一个小问题: 就是页面主体内容过长的话,会产生滚动条,滚动一下就又可以看到主体内容了, 解决这个问题也不难, 刚开始的时候把body的overflow设置为hidden, 最后在onload里面还原回来.
      

  8.   

    extjs文档例子:http://dev.sencha.com/deploy/ext-2.3.0/docs/
      

  9.   

    <body>
    <script type="text/javascript">
        
         var container = Ext.create('Ext.container.Container', {
             renderTo : Ext.getBody(),
             width : 400,
             height : 700,
             style : 'margin:0 auto;',
             layout: {
              type : 'vbox',
              align : 'center',
              pack : 'center'
             },
             items : [ new Ext.ProgressBar({
              id : 'pgb',
                 width : 300
             }) ]
         });     var pgb = Ext.getCmp('pgb');
         pgb.wait({
             text: 'loading...',
         });
        
         var load = function() {
         if ( ready != 'yes' ) {
         setTimeout(load, 100);
         } else {
         pgb.updateText('Done!');
             container.hide();
         }
         }
        
         load();

    </script>
    </body>