一聚教程网:一个值得你收藏的教程网站

最新下载

热门教程

jquery loading页面加载效果

时间:2011-07-09 编辑:简简单单 来源:一聚教程网

jquery 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()

热门栏目