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

此效果的原理:在页面加载完成前在整个页面上边覆盖一层,即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();
    });
});

猜你喜欢

转载自blog.csdn.net/weixin_44134899/article/details/85048011