jQuery加载全部页面完成前的loading效果_北京博虎网络科技有限公司—不只是帮您建网站,从此都是您全方位的网络顾问！

jQuery加载全部页面完成前的loading效果

发表日期：2020-08-28 17:25文章编辑：博虎网络浏览次数：标签：

此效果的原理：在页面加载完成前在整个页面上边覆盖一层，即loading层，等到页面加载完成后，将loading层隐藏。

此效果的HTML代码部分：在整个代码前，添加div，即loading层（可以添加load的图片，也可以当做背景图写在css里）

<div id="loading">
            <div class="loadimg">
                <img src="/images/logo.png" alt="loading.." />
            </div>
        </div>

CSS部分：

#loading {position: fixed;z-index: 999999999;width: 100%;height: 100%;top: 0;left: 0%;text-align: center;font-size: 0.9rem;color: #595758;background-color: #090909;}
.loadimg{position: absolute;top: 50%;left: 50%;margin-left: -50px;margin-top: -30px;word-break: break-all;}