• 我转过几个弯 绕过那个小雨楼
  • 拿着蒲扇摆着衣衫渡着紧箍咒
  • 不问天涯不停留 喝过几壶酒
  • 不过年少白头道义放胸口
  • 倘若明天之后 遥看前尘剑封侯
  • 似那天上神仙无所求
  • 朝朝暮暮君如梦醒十分不为何理由
  • 是真是假是惶恐是无休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 又过了几个弯 算尽天量道莫慌
  • 踏这田园闻这芳草香
  • 跌跌撞撞仗剑天涯折煞不枉无笔良
  • 是梦是幻是温柔是家乡
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 谁能与我一醉方休

加载动画小心得

125 0

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

0
  • 本文分类:JavaScript
  • 本文标签:加载动画
  • 流行热度:已超过 125 人围观了本文
  • 最后更新:2019年05月10日 - 2时33分51秒
  • 发布日期:2019年05月10日 - 2时33分51秒
  • 版权申明:本文系作者@木灵鱼儿原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。
微信收款码
微信收款码