原生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 相关文章推荐
List Information About the Binary Files Used by an Application
Jun 11 Javascript
Jquery下判断Id是否存在的代码
Jan 06 Javascript
13 款最热门的 jQuery 图像 360 度旋转插件推荐
Dec 09 Javascript
JavaScript不使用prototype和new实现继承机制
Dec 29 Javascript
基于 Node.js 实现前后端分离
Apr 23 Javascript
图解prototype、proto和constructor的三角关系
Jul 31 Javascript
Input文本框随着输入内容多少自动延伸的实现
Feb 15 Javascript
JavaScript限定范围拖拽及自定义滚动条应用(3)
May 17 Javascript
快速了解vue-cli 3.0 新特性
Feb 28 Javascript
vue .sync修饰符的使用详解
Jun 15 Javascript
深入理解es6块级作用域的使用
Mar 28 Javascript
vue.js watch经常失效的场景与解决方案
Jan 07 Vue.js
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
全国FM电台频率大全 - 22 重庆市
2020/03/11 无线电
解析php中curl_multi的应用
2013/07/17 PHP
PHP基于递归算法解决兔子生兔子问题
2018/05/11 PHP
php上传图片并给图片打上透明水印的代码
2010/06/07 Javascript
jquery不会自动回收xmlHttpRequest对象 导致了内存溢出
2012/06/18 Javascript
HTTP 304错误的详细讲解
2013/11/13 Javascript
鼠标选择动态改变网页背景颜色的JS代码
2013/12/10 Javascript
javascript生成json数据简单示例分享
2014/02/14 Javascript
JavaScript实现获取dom中class的方法
2015/02/09 Javascript
jQuery实现在列表的首行添加数据
2015/05/19 Javascript
Javascript6中字符串的四个新用法分享
2016/09/11 Javascript
layer弹出层框架alert与msg详解
2017/03/14 Javascript
js脚本编写简单刷票投票系统
2017/06/27 Javascript
Angular中使用better-scroll插件的方法
2018/03/27 Javascript
Vue项目使用CDN优化首屏加载问题
2018/04/01 Javascript
[01:07:21]NAVI vs VG Supermajor 败者组 BO3 第二场 6.5
2018/06/06 DOTA
Python continue语句用法实例
2014/03/11 Python
Python使用代理抓取网站图片(多线程)
2014/03/14 Python
python中常用的各种数据库操作模块和连接实例
2014/05/29 Python
python获取各操作系统硬件信息的方法
2015/06/03 Python
python+opencv实现的简单人脸识别代码示例
2017/11/14 Python
numpy给array增加维度np.newaxis的实例
2018/11/01 Python
python-opencv 将连续图片写成视频格式的方法
2019/01/08 Python
python中return的返回和执行实例
2019/12/24 Python
pytorch之ImageFolder使用详解
2020/01/06 Python
python实现时间序列自相关图(acf)、偏自相关图(pacf)教程
2020/06/03 Python
浅谈python 调用open()打开文件时路径出错的原因
2020/06/05 Python
微软台湾官方网站:Microsoft台湾
2018/08/15 全球购物
主题酒店策划书
2014/01/28 职场文书
幼儿园教学管理制度
2014/02/04 职场文书
大学生学习新党章思想汇报
2014/10/25 职场文书
蓬莱阁导游词
2015/02/04 职场文书
综合测评个人总结
2015/03/03 职场文书
综治目标管理责任书
2015/05/11 职场文书
详解Laravel制作API接口
2021/05/31 PHP
Django集成富文本编辑器summernote的实现步骤
2021/05/31 Python