原生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 相关文章推荐
JavaScript高级程序设计 读书笔记之十一 内置对象Global
Mar 07 Javascript
jquery实现炫酷的叠加层自动切换特效
Feb 01 Javascript
javascript实现table选中的行以指定颜色高亮显示的方法
May 13 Javascript
javascript实现带下拉子菜单的导航菜单效果
May 14 Javascript
javascript中tostring()和valueof()的用法及两者的区别
Nov 16 Javascript
jQuery手动点击实现图片轮播特效
Apr 20 Javascript
内容滑动切换效果jquery.hwSlide.js插件封装
Jul 07 Javascript
浅谈js函数中的实例对象、类对象、局部变量(局部函数)
Nov 20 Javascript
AngularJS通过ng-Img-Crop实现头像截取的示例
Aug 17 Javascript
使用Angular-CLI构建NPM包的方法
Sep 07 Javascript
Vuex 模块化使用详解
Jul 31 Javascript
基于JS实现简单滑块拼图游戏
Oct 12 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获取ip对应地区和使用网络类型的方法
2015/03/11 PHP
使用URL传输SESSION信息
2015/07/14 PHP
php实现二叉树中和为某一值的路径方法
2018/10/14 PHP
PHP利用pdo_odbc实现连接数据库示例【基于ThinkPHP5.1搭建的项目】
2019/05/13 PHP
浅谈Laravel模板实体转义带来的坑
2019/10/22 PHP
php设计模式之策略模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
dojo 之基础篇(二)之从服务器读取数据
2007/03/24 Javascript
js实现div拖动动画运行轨迹效果代码分享
2015/08/27 Javascript
js实现select二级联动下拉菜单
2020/04/17 Javascript
AngularJS使用ng-repeat遍历二维数组元素的方法详解
2017/11/11 Javascript
解析Angular 2+ 样式绑定方式
2018/01/15 Javascript
使用vue-router设置每个页面的title方法
2018/02/11 Javascript
vue-router判断页面未登录自动跳转到登录页的方法示例
2018/11/04 Javascript
vue 内置过滤器的使用总结(附加自定义过滤器)
2018/12/11 Javascript
Vue2.0使用嵌套路由实现页面内容切换/公用一级菜单控制页面内容切换(推荐)
2019/05/08 Javascript
微信小程序云函数使用mysql数据库过程详解
2019/08/07 Javascript
十分钟教你上手ES2020新特性
2020/02/12 Javascript
解决vue动态下拉菜单 有数据未反应的问题
2020/08/06 Javascript
js+canvas实现图片格式webp/png/jpeg在线转换
2020/08/22 Javascript
[14:51]DOTA2 HEROS教学视频教你分分钟做大人-卓尔游侠
2014/06/13 DOTA
python实现简易内存监控
2018/06/21 Python
pycharm修改界面主题颜色的方法
2019/01/17 Python
django 实现简单的插入视频
2020/04/07 Python
纯css3实现走马灯效果
2014/12/26 HTML / CSS
英国奢侈品网站:MatchesFashion
2016/12/16 全球购物
西班牙三叶草药房:Farmacias Trébol
2019/05/03 全球购物
应届生服装设计自我评价
2013/09/20 职场文书
语文课外活动总结
2014/08/27 职场文书
房屋产权共有协议书范本
2014/11/03 职场文书
2015年综治宣传月活动总结
2015/03/25 职场文书
2015年暑期社会实践活动总结
2015/03/27 职场文书
中学社团活动总结
2015/05/07 职场文书
员工考勤管理制度
2015/08/06 职场文书
学会感恩主题班会
2015/08/12 职场文书
Nginx服务器添加Systemd自定义服务过程解析
2021/03/31 Servers
Python实现简繁体转换
2021/06/07 Python