网页加载动画｜DuMengjie's blog

前言

最近把一些项目部署到了github上，发现访问速度并不是很稳定，加载时间有点爆炸。这时就体现出了加载动画的价值，一段优秀的网页加载动画能极大的提升用户体验，还能提高你网站的逼格😊。

加载动画显示的时机

首先，加载动画是打开网页时最先显示的，所以加载动画的元素和节点一定要放在<body>的最前方。

其次，加载动画什么时候消失呢？答：在页面所有元素（包括图片，引用文件）加载完毕后。

使用window.onload()方法就可以完美的做到这一点（要注意其与$(document).ready()的区别，后者在DOM文档树加载完毕后即执行，此时其他资源可能还未加载完）。

代码

HTML

<!--这部分要放在body的最前方-->
<div id="preloader">
  <div id="status">
    <img alt="logo" src="images/logo-big.png">
  </div>
</div>
<!--下面是网页正文-->

CSS

这里用了个小技巧，首先将容器$("#preloader")位置设置为固定position:fixed，然后设置其上下左右距离均为零top:0;left:0;bottom:0;right:0;，此时容器大小就是整个可视区域的大小，就可以实现全屏遮罩了。

还使用了元素水平垂直居中的技巧，详情参见元素的水平及垂直居中。

#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  z-index: 999999;
}
#status {
  width: 200px;
  height: 200px;
  position: absolute;
  left: 50%;
  top: 50%;
  background-image: url(../images/loader.gif);
  background-repeat: no-repeat;
  background-position: center center;
  text-align: center;
  margin: -40px 0 0 -100px;
}
#status img {
  text-align: center;
  margin-top: -80px;
}

window.onload = function(){
  //页面加载完毕后淡出
  $('#status').fadeOut();
  $('#preloader').delay(450).fadeOut('slow');
};

最终效果

LOGO下面的加载圆圈其实就是一个gif图，没有什么技术含量😁。

附上演示地址。

前言
加载动画显示的时机
代码
最终效果

网页加载动画

前言

加载动画显示的时机

代码

最终效果

FEATURED TAGS

FRIENDS