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

来源:互联网 发布:mac web开发工具 编辑:程序博客网 时间:2024/06/10 19:44

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


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

<div id="loading">    <img src="images/loading.gif" alt="loading.." /></div>  

CSS部分

#loading {    position: fixed;    z-index: 400;    width: 100%;    height: 100%;    top: 0;    left: 0%;    text-align: center;    font-size: 0.9rem;    color: #595758;    background-color: #ffffff;}

jQuery部分

jQuery(document).ready(function(){    jQuery(window).load(function(){  //load函数        jQuery("#loading").hide();    });});




0 0
原创粉丝点击