[分享] 页面加载(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()

 

下载：完整实例