页面加载时出现loading效果

十年 2020-07-29 PM 299℃ 0条

网页加载时出现loading效果实现-javascript

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>页面加载loading效果实现</title>
        <style>
            #loading{
                width: 100%;
                height: 100%;
                background-color: #fff;
                position: fixed;
                top:0;
                left: 0;
                z-index: 9999;
            }
            #loading >div{
                position: absolute;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                margin:auto;
                background: url("./loading.gif") no-repeat; /*替换自己路径中的loading图片*/
                background-position: center 50%;
            }
        </style>
    </head>
    <body>
        <div id="loading">
            <div></div>
        </div>
        <script type="text/javascript">
            //检测页面加载时状态
            document.onreadystatechange=function(){
                //页面加载结束隐藏gif动画
                if(document.readyState==='complete'){
                    document.getElementById('loading').style = 'display:none;';
                    //jquery这样式写效果更佳 $("#loading").fadeOut();
                }
            }
        </script>
    </body>
</html>
标签: javascript

非特殊说明,本博文章为博主原创。

评论啦~