网页页面预加载动画的实现，加载后隐藏

版权声明：关注微信公众号：摸鱼科技资讯，联系我们 https://blog.csdn.net/qq_36949176/article/details/83896508

我们做web app的时候，可以做一个页面加载广告，在你网页加载的时候，先出现一段gif动图或者是海报。
下面是实现页面加载动画的代码
首先js代码的实现

(function($){
    $(window).load(function(){
        $('#begin').fadeOut();
        $('#loading').delay(200).fadeOut('slow');
    });
 
	$(document).ready(function(){
	//code
	}）
 
})(jQuery);

HTML加载层

 <!--加载动画层-->
  <div id="loading">
    <div id="begin"></div>
  </div>

CSS代码实现

#loading{
    background:#ffffff;
    bottom:0;
    left:0;
    position: fixed;
    right:0;
    top:0;
    z-index:500;
}
 
#begin{
    background: url(../images/loading.gif)center center no-repeat; //这里可以替换掉你需要加载的图片
    height:200px;  //控制大小
    width:200px;   //控制大小
    left:50%;          //控制位置，可去掉
    top:50%;            //控制位置，可去掉
    margin: -100px 0 0 -100px;
    position: absolute;
}

引用入自己的网页文件，就能实现页面预加载广告界面了。

如：www.studiosworks.cn