更新于

加载动画小心得

发布于 / 分类: JavaScript / 暂无评论 / 阅读量: 599

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

暂无评论

Info
站点信息

以前觉得活下去很难,现在发现活的好才难!

创建于20156

总共发表了261篇文章

共有393条评论

创建了21个分类目录

Archive
时间归档
Weather
天气

湿度
设置
配色方案

布局

购买