jQuery实现网页打开显示loading加载效果

实现原理：页面一打开显示loading图标，当页面加载完时，触发 completeLoading 函数，js隐藏loading图标

[JavaScript] 纯文本查看 复制代码

<style type="text/css">
#loading{
    position:fixed;
    left:0px;
    top:0px;
    width:100%;
    height:100%;
    z-index:99999;
    background:rgba(255,255,255,1);
}
#loading img{
    display:block;
    margin:0 auto;
    width:60px;
    height:60px;
    position:relative;
    top:50%;
    margin-top:-30px;
}


</style>
<div id="loading"><img src="/public/static/admin/base/images/loading2.gif"/></div>
<script type="text/javascript">
        document.onreadystatechange = function () {
        if (document.readyState == "complete") {
            $("#loading").animate({"opacity": "0"}, 500,function(){
                                $("#loading").hide();
                        });
        }
    }
</script>