原生JS实现首页进度加载动画


Posted in Javascript onSeptember 14, 2016

js进度加载动画程序是本人的个人作品,写的不好,可以参考,但未经本人允许,请不要用于其它用途! 

早上写了个首页进度加载动画,本想在我的博客里用上,测试发现博客园加载太快,根本看不到动画效果,直接就加载‘Complete'了,算了,还是不要把博客搞得太臃肿了! 

于是我就写了个演示页面,在body里加了个iframe来加载大一点的网站,这样就看出效果了! 

用Safari打开貌似CSS动画的播放时间变成同步了,不知道什么原因,本地测试又没问题(请大神指点!),用Chrome、Firefox倒是没问题,而IE我没测试过 

加载时间统计我用了Windows对象的performance属性,它是专门用来来计算精确时间的方法,这是MDN关于performance属性的描述 

本实例的实现原理比较简单,不过不是真正的按文件大小来显示加载进度的,只是在触发document.onreadystatechange事件时,根据document.readyState的状态来改变显示进度的。其实还有一种靠谱一点的方法,用XMLHttpRequest对象的实例的progress事件,详细解读XMLHttpRequest,如:

var request = new XMLHttpRequest();
 request.onprogress = function (e) {
 if(e.lengthComputable){ //lengthComputable是指文件是否有大小,值为true、false
 progress.innerHTML = Math.round(100* e.loaded/ e.total) + \'%\'; //loaded、total表示已经加载的大小和总大小
 }
 }

用以上方法实现起来也挺麻烦,而且也不能实现100%的真实加载进度,所以我索性就假一点了,不用他了! 

本实例还用到了document.styleSheets[0].insertRule()方法,这里有我对它的总结:用原生JS读写CSS样式的方法总结 

关于CSS动画的实现,大家自己看代码吧,很简单的代码,如果看的吃力,建议去补补CSS基础了,介绍个干货,CSS中文参考手册网站,我表达能力有限,就不在这里嚼口舌了 

下面是完整代码+演示:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>苏福的作品</title>
 <script>
 document.onreadystatechange = function () {
 function $id(id){return document.getElementById(id)}
 var width = 0,id,
 preloader_line = $id('preloader_line').firstElementChild,
 preloader = $id('preloader'),
 preloader_center = $id('preloader_center'),
 preloader_btn = $id('preloader_btn'),
 preloader_loading = $id('preloader_loading');
 if (document.readyState == "interactive") {
 loading(1,110,50);
 }
 if (document.readyState == "complete") {
 loading(5,120,16.7);
 preloader_loading.id = 'preloader_loaded';
 preloader_loading.innerHTML = 'Loading Complete'+'<br/>'+'Using: '+performance.now().toFixed(3)+' ms';
 preloader_btn.innerHTML = 'E N T E R';
 preloader_btn.style.borderBottom = '4px solid green';
 preloader_btn.style.fontStyle = 'inherit';
 preloader_btn.style.fontSize = '24px';
 if(document.styleSheets[0].insertRule){
 document.styleSheets[0].insertRule('#preloader_btn:hover{border-bottom: 4px solid green;border-radius: 60px;color: red;}',0);
 }else{//兼容IE9以下
 document.styleSheets[0].addRule('#preloader_btn:hover{border-bottom: 4px solid green;border-radius: 60px;color: red;}',0);
 }
 preloader_btn.onclick = function () {
 var opacity = 1,id;
 function hide(){
 if(opacity<=0){
 clearTimeout(id);
 preloader.style.display = 'none';
 document.body.style.overflow = 'auto';
 return;
 }
 opacity -= 0.1;
 preloader.style.opacity = opacity;
 id = setTimeout(function(){
 hide();
 },50);
 }
 hide();
 };
 }
 function loading(step,max,time){
 if(width>=max){
 clearTimeout(id);
 if(max >= 120){
 preloader_line.parentNode.style.display = 'none';
 }
 return;
 }
 width += step;
 preloader_line.style.width = width+'px';
 id = setTimeout(function(){
 loading(step,max,time);
 },time);
 }
 };
 </script>
 <style>
 body{
 overflow: hidden;
 }
 #preloader{
 position: absolute;
 width: 100%;
 height: 100%;
 background-color: white;
 z-index: 999;
 }
 #preloader_center{
 position: absolute;
 left: 0;
 right: 0;
 top: 0;
 bottom: 0;
 width: 150px;
 height: 75px;
 margin:auto;
 }
 #preloader_loading{
 position: absolute;
 left: 0;
 right: 0;
 top: 45px;
 margin: auto;
 width: 96px;
 height: 30px;
 }
 #preloader_loaded{
 position: absolute;
 left: 0;
 right: 0;
 top: 45px;
 margin: auto;
 font-size: 12px;
 text-align: center;
 line-height: 30px;
 }
 #preloader_loading span{
 position: absolute;
 width: 10px;
 height: 2px;
 top: 0;
 bottom: 0;
 margin:auto;
 background-color: #9b59b6;
 animation: loading 1.5s infinite ease-in-out ;
 }
 #preloader_loading span:nth-child(2){
 left: 12px;
 animation-delay: .1s;
 }
 #preloader_loading span:nth-child(3){
 left: 24px;
 animation-delay: .2s;
 }
 #preloader_loading span:nth-child(4){
 left: 36px;
 animation-delay: .3s;
 }
 #preloader_loading span:nth-child(5){
 left: 48px;
 animation-delay: .4s;
 }
 #preloader_loading span:nth-child(6){
 left: 50px;
 animation-delay: .5s;
 }
 #preloader_loading span:nth-child(7){
 left: 62px;
 animation-delay: .6s;
 }
 #preloader_loading span:nth-child(8){
 left: 74px;
 animation-delay: .7s;
 }
 #preloader_loading span:nth-child(9){
 left: 86px;
 animation-delay: .8s;
 }
 @keyframes loading {
 0%{height: 2px;background:#9b59b6;}
 15%{height: 20px;background:#3498db;}
 50%{height: 2px;background:#9b59b6;}
 100%{height: 2px;background:#9b59b6;}
 }
 iframe{width: 100%;height: 1000px;}
 #preloader_btn{
 position: absolute;
 left: 0;
 right: 0;
 top: 0;
 margin:auto;
 display: block;
 width: 122px;
 height: 40px;
 font-size: 14px;
 text-align: center;
 line-height: 40px;
 cursor: pointer;
 color: #9b59b6;
 font-style: italic;
 -webkit-transition: all .5s;
 -moz-transition: all .5s;
 -ms-transition: all .5s;
 -o-transition: all .5s;
 transition: all .5s;
 }
 #preloader_line{
 position: absolute;
 left: 0;
 right: 0;
 top: 40px;
 margin:auto;
 width: 120px;
 height: 2px;
 border: 1px solid green;
 }
 #preloader_line span{
 display: block;
 height: 2px;
 width: 0;
 background-color: green;
 }
 </style>
</head>
<body>
<div id="preloader">
 <div id="preloader_center">
 <span id="preloader_btn">Loading...</span>
 <span id="preloader_line">
 <span></span>
 </span>
 <div id="preloader_loading">
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 </div>
 </div>
</div>
<iframe src="http://jd.com"></iframe>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery实现用户名无刷新验证的小例子
Mar 22 Javascript
JavaScript 判断用户输入的邮箱及手机格式是否正确
Dec 08 Javascript
js生成缩略图后上传并利用canvas重绘
May 15 Javascript
获取JS中网页各种高宽与位置的方法总结
Jul 27 Javascript
JavaScript中数据类型转换总结
Dec 25 Javascript
js常用DOM方法详解
Feb 04 Javascript
JS中的回调函数实例浅析
Mar 21 Javascript
vue代码分割的实现(codesplit)
Nov 13 Javascript
微信小程序外卖选购页实现切换分类与数量加减功能案例
Jan 15 Javascript
Nuxt.js实现一个SSR的前端博客的示例代码
Sep 06 Javascript
js实现简单音乐播放器
Jun 30 Javascript
javascript实现固定侧边栏
Feb 09 Javascript
jquery判断iPhone、Android设备类型
Sep 14 #Javascript
Angularjs 实现分页功能及示例代码
Sep 14 #Javascript
Angularjs CURD 详解及实例代码
Sep 14 #Javascript
Angular Module声明和获取重载实例代码
Sep 14 #Javascript
javascript经典特效分享 手风琴、轮播图、图片滑动
Sep 14 #Javascript
Angular 应用技巧总结
Sep 14 #Javascript
AngularJS 所有版本下载地址
Sep 14 #Javascript
You might like
PHP 获取文件权限函数介绍
2013/07/11 PHP
AJAX PHP无刷新form表单提交的简单实现(推荐)
2016/09/09 PHP
javascript算法题 求任意一个1-9位不重复的N位数在该组合中的大小排列序号
2012/07/21 Javascript
Js base64 加密解密介绍
2013/10/11 Javascript
IE与FireFox的JavaScript兼容问题解决办法
2013/12/31 Javascript
js解决select下拉选不中问题
2014/10/14 Javascript
AngularJS入门教程之AngularJS指令
2016/04/18 Javascript
Node.js的Mongodb使用实例
2016/12/30 Javascript
JS HTML图片显示Canvas 压缩功能
2017/07/21 Javascript
Angularjs渲染的 using 指令的星级评分系统示例
2017/11/09 Javascript
Angular2管道Pipe及自定义管道格式数据用法实例分析
2017/11/29 Javascript
JS实现的文件拖拽上传功能示例
2018/05/21 Javascript
详解Nodejs mongoose
2018/06/10 NodeJs
js的各种数据类型判断的介绍
2019/01/19 Javascript
javascript设计模式 ? 解释器模式原理与用法实例分析
2020/04/17 Javascript
Vue项目中数据的深度监听或对象属性的监听实例
2020/07/17 Javascript
基于JQuery和DWR实现异步数据传递
2020/10/16 jQuery
Vue-router编程式导航的两种实现代码
2021/03/04 Vue.js
[02:38]DOTA2超级联赛专访Loda 认为IG世界最强
2013/05/27 DOTA
[05:26]TI10典藏宝瓶套装外观展示
2020/07/03 DOTA
用Python实现QQ游戏大家来找茬辅助工具
2014/09/14 Python
对Python中内置异常层次结构详解
2018/10/18 Python
python广度优先搜索得到两点间最短路径
2019/01/17 Python
Python定时任务随机时间执行的实现方法
2019/08/14 Python
Pycharm2020.1安装中文语言插件的详细教程(不需要汉化)
2020/08/07 Python
如何在python中处理配置文件代码实例
2020/09/27 Python
英国领先的狗和宠物美容专家:Christies Direct
2017/04/03 全球购物
残疾人创业典型事迹
2014/02/01 职场文书
网络宣传方案
2014/03/15 职场文书
环保专项行动方案
2014/05/12 职场文书
关于安全的标语
2014/06/10 职场文书
法学专业毕业生求职信
2014/06/12 职场文书
拓展训练激励口号
2014/06/17 职场文书
金融专业毕业生自荐信
2014/06/26 职场文书
如何写早恋检讨书
2014/09/10 职场文书
2014年大班保育员工作总结
2014/12/02 职场文书