[分享] 页面加载(loading)效果兼超时提示

在“庞大”的页面加载的过程中，加入一个小小的 loading 效果，会使得这个页面极其富有“生命力”。也能减缓用户急躁的等待情绪，同时也在视觉效果上得到体现。其实现方式也极其简单。

 

以下实现了一个简单的原型：

     function  loadTimeout(){
         var  
         // 超时秒数
        second  =   10
         // 计时器
        timer  =  setInterval( function (){
             if ( -- second  <   1 ){
                document.getElementById( ' loading ' ).innerHTML  =   ' 您当前的网络连接过慢！ ' ;
                clearInterval(timer)
            }
        }, 1000 );
         // 注册事件
        document.attachEvent  ?  document.attachEvent( ' onreadystatechange ' ,CtrlLoad) : document.onreadystatechange  =  CtrlLoad;
         // 控制加载
         function  CtrlLoad(){
             if (document.readyState  &&  ( ' complete '   ==  document.readyState)){
                document.getElementById( ' loading ' ).style.display  =   ' none ' ;
                clearInterval(timer)
            }
        }
    }
     // 调用
    loadTimeout()

 

下载：完整实例

转载于:https://www.cnblogs.com/wuxinxi007/archive/2011/07/08/2100855.html