原生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 编程引入命名空间的方法
Jun 29 Javascript
为JavaScript类型增加方法的实现代码(增加功能)
Dec 29 Javascript
使用纯javascript实现放大镜效果
Mar 18 Javascript
jQuery学习笔记之Ajax用法实例详解
Dec 01 Javascript
轻松搞定jQuery.noConflict()
Feb 15 Javascript
jquery form表单获取内容以及绑定数据
Feb 24 Javascript
原生javascript实现匀速运动动画效果
Feb 26 Javascript
关于javascript的一些知识以及循环详解
Sep 12 Javascript
jQuery实现数字自动增加或者减少的动画效果示例
Dec 11 jQuery
详解Vue前端生产环境发布配置实战篇
May 07 Javascript
element-ui如何防止重复提交的方法步骤
Dec 09 Javascript
vue 中的动态传参和query传参操作
Nov 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版(1)
2006/10/09 PHP
php str_pad 函数用法简介
2009/07/11 PHP
PHP中Date()时间日期函数的使用方法小结
2011/04/20 PHP
深入php list()函数的详解
2013/06/05 PHP
解析php扩展php_curl.dll不加载的解决方法
2013/06/26 PHP
PHP函数eval()介绍和使用示例
2014/08/20 PHP
短信提示使用 特效
2007/01/19 Javascript
用JQuery 实现的自定义对话框
2007/03/24 Javascript
使用typeof方法判断undefined类型
2014/09/09 Javascript
使用js dom和jquery分别实现简单增删改
2014/09/11 Javascript
JS建造者模式基本用法实例分析
2015/06/30 Javascript
Bootstrap树形菜单插件TreeView.js使用方法详解
2016/11/01 Javascript
js省市区级联查询(插件版&amp;无插件版)
2017/03/21 Javascript
js实现简单贪吃蛇游戏
2020/05/15 Javascript
JavaScript字符和ASCII实现互相转换
2020/06/03 Javascript
浅谈实现在线预览PDF的几种解决办法
2020/08/10 Javascript
[04:38]完美世界携手游戏风云打造 卡尔工作室饰品系统篇
2013/04/25 DOTA
python3使用urllib示例取googletranslate(谷歌翻译)
2014/01/23 Python
Python中使用gzip模块压缩文件的简单教程
2015/04/08 Python
python访问系统环境变量的方法
2015/04/29 Python
Python ftp上传文件
2016/02/13 Python
Python3中类、模块、错误与异常、文件的简易教程
2017/11/20 Python
django上传图片并生成缩略图方法示例
2017/12/11 Python
对pandas中Series的map函数详解
2018/07/25 Python
在python中利用最小二乘拟合二次抛物线函数的方法
2018/12/29 Python
基于tf.shape(tensor)和tensor.shape()的区别说明
2020/06/30 Python
Probikekit欧盟:在线公路自行车专家
2019/07/12 全球购物
销售代表求职自荐信
2013/10/01 职场文书
国际商务系学生个人的自我评价
2013/11/26 职场文书
幼儿园教学管理制度
2014/02/04 职场文书
大型会议接待方案
2014/03/01 职场文书
公司门卫岗位职责
2014/03/15 职场文书
学校师德承诺书
2014/05/23 职场文书
环境工程专业自荐信范文
2014/06/24 职场文书
一行Python命令实现批量加水印
2022/04/07 Python
如何开启Apache,Nginx和IIS服务器的GZIP压缩功能
2022/04/29 Servers