北京博虎网络科技有限公司——不只是帮您建网站,从此都是您全方位的网络顾问!
当前位置:主页 > 网站科普 > 建站知识 >

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>

  1.  
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;}
  1. jQuery部分

  2.  
jQuery(document).ready(function(){
 
jQuery(window).load(function(){ //load函数
 
jQuery("#loading").hide();
 
});
 
});
 
相关新闻

phpcms后台加载慢非127.0.0.1问题

如何解决PHPCMS后台反应慢的问题 相信很多程序员在用phpcms后台内容管理系统,都出现更新缓存...

日期:2019-07-15 浏览次数:189

phpcms v9单网页$top_parentid不能用的解决方法(单页父栏目调用全部

在实现子栏目的父栏目或顶级栏目高亮的时候,博虎网络技术小刘发现单网页无法实现,经检...

日期:2019-06-17 浏览次数:234