正在加载中

最后更新于 2019年05月10日

网页加载动画的原理其实就是当页面加载时他显示的就是加载动画,这个动画浮动于最上层将下面的内容全部遮盖住,而当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动画层的小心得!

  • weixiao kaixin tushetou jingkong deyi fanu liezui liuhan daku ganga bishi nanguo lihai qian yiwen numu tu yi haixiu se fadai minyan hehe henkaixin huaji biyiyan kuanghan maimeng shui xiaku penqi zhangzui pen aini ye niu laji ok chigua renshi kongbu shuai xiaoxiese touxiao huaixiao jingnu chihuai kaisang xiaoku koubi zhuangbi lianhong kanbujian shafa zhijing xiangjiao dabian yaowan redjing lazhu rizhi duocang chixigua hejiu xixi xiaopen goukun xiaobuchu shenme wusuowei guancha lajing chouyan xiaochi bie zhadanzui zhadanxiao

登录