加载动画小心得

网页加载动画的原理其实就是当页面加载时他显示的就是加载动画，这个动画浮动于最上层将下面的内容全部遮盖住，而当dom已经加载完毕，触发onload事件，此时再将动画层进行移除处理。

那么这样写会导致一个问题，就是你打开任何页面，都会先触发动画层，然后再显示内容，这样就会影响体验，我们之所以加一个动画层，就是为了在用户第一次打开页面的时候，不会卡在空白啊，或者加载资源中而导致页面布局不完整，但是当第一次onload事件完成后，其实浏览器本地已经将大部分的资源进行了缓存，包括css、font文件、img文件，所以，我们只需要第一次加载的时候显示动画层即可。

如何判断是第一次加载

常用的方法有创建cookie，但是cookie本身数量有限制，而且在浏览器于服务器连接的时候，cookie也会被传输，所以不怎么建议使用cookie，那么本地缓存也就只有html5提供的Stroage了。

ie8以上才支持的属性，有本地缓存和临时缓存，本地缓存是长期的，我们可以通过判断缓存的值来进行操作，比如第一次打开value的值是0，表示第一次，if判断后，触发动画层，当load加载完毕，value的值改为1，表示加载完毕，那么第二次就不触发了。

1. localStroage 本地缓存
2. sessionStroage 临时缓存

本地缓存有一个好处，就是同个浏览器可以跨顶级窗口访问，而临时缓存只能在同一个顶级窗口访问到，所以从用户的角度想，自然是本地缓存最优，但是我考虑到调试啊，所以使用临时缓存会方便些，而且本地和临时他们的方法是一样的，你调试好后再改为本地缓存就可以了。

出现问题

为了不让用户每次加载页面都会触发动画层，那么css的设置，必然会设置为display:none；这样每次加载就不会先触发动画层了，而触发js需要等到onload事件完成，其中会有加载时间，所以你不能直接再onload里面去操作动画层display:none;而是css初始值就是如此。

那么这就会引发一个问题，我们怎么让他第一次加载显示动画层？

很简单，我们可以单独设置一个js文件，在动画层这个元素后面加载，从dom加载的顺序来说，动画层先加载，js再加载，那么此时js就可以获取到动画层元素。

代码示意：

<div id="load" >
 
</div>
<script src="js/load.js"></script>

当页面加载时，load是最先加载完毕的，然后load.js其次，那么load.js只需要将load元素display:block;即可，它的任务也就完成了。

在js控制load元素的时候我犯了一个css优先级的错误

#load {
  display:none;
}
.loadblock {
  display:block;
}

当我给这个元素添加className:loadblock;的时候，动画层是不显示的，因为id选择器>class选择器，哪怕你的css顺序在id之下，所以这里要使用两个class

.loadnone {
  display:none;
}
.loadblock {
  display:block;
}

这样就可以避免优先级导致的问题，并且还可以进行删除class来规避问题，非常方便

以上就是我目前使用load动画层的小心得！