原生JS实现首页进度加载动画
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实现水平进度条拖拽效果
本文实例为大家分享水平进度条拖拽效果的js具体代码,供大家参考,具体内容如下 <html> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } .scroll{ margin:100px; width: 500px; height: 5px; background: #ccc; posit
-
jquery插件NProgress.js制作网页加载进度条
NProgress.js是极细的纳米级进度条,用现实的细线条动画让用户看到网页正在发生的事情! 你也许已经在 Youtube 上看过了那道红色激光脉冲,它会在你切换页面时出现.其实许多移动浏览器的进度条都是这个样式,但是在网页上实现可不多见.不过,有了 NProgress 这个 jQuery 插件,你也可以轻松实现! NProgress.js应用于复杂网页的细长进度条.由 Google, YouTube, 和 Medium 提供灵感. 安装 依赖于 jQuery (1.8版本及以上),添加 np
-
js HTML5 Ajax实现文件上传进度条功能
本文实例介绍了js结合HTML5 Ajax实现文件上传进度条功能,分享给大家供大家参考,具体内容如下 1. lib.js var Host = window.location.host; //--Cookie function setCookie(name,value) { var Days = 30; var exp = new Date(); exp.setTime(exp.getTime() + Days*24*60*60*1000); document.cookie = name +
-
JS与HTML结合实现流程进度展示条思路详解
效果如下: 一.设计思路 分为以下几步(仅供参考) [竖线线] 这个采用ul的list标签制作,保证了可随时添加,以及纵向排布 [小圆圈] html标签好像没有提供小圆圈标签,此处采用,div添加弧度角完成,,正方形的div添加弧度等于div的长(或者宽),就能够实现小圆圈.带子就更简单了,,div里直接添加文字即可 [文字] 文字要求紧跟小圆圈,,且与小圆圈保持同一水平高度,此处采用,position: absolute;设置top完成同一水平高度的布局 [动态效果] 前端的动态效果,不用说肯
-
直接拿来用的页面跳转进度条JS实现
本文实例介绍了基于javascript实现的页面跳转进度条,分享给大家供大家参考,具体内容如下 效果图: 具体代码: <HTML> <HEAD> <TITLE>open代码</TITLE> <SCRIPT type=text/javascript> <!-- var ie5 = (document.all && document.getElementsByTagName); var step = 0; function se
-
js ajax加载时的进度条代码
最终效果如下图所示,pc和移动端都可以展示的,调用方法也很简单,开始调用:loading.baosight.showPageLoadingMsg(false),alse代表不现实加载说明,true展示加载说明.调用完成后调用:loading.baosight.hidePageLoadingMsg(),在整个代码里有两个文件,一个是js文件,一个是css文件.切记不要忘记引入jquery.js css文件 #_loadMsg{ display: inline-block; width: 100%;
-
JavaScript实现网页加载进度条代码超简单
网页进度条能够更好的反应当前网页的加载进度情况,loading进度条可用动画的形式从开始0%到100%完成网页加载这一过程.但是目前的浏览器并没有提供页面加载进度方面的接口,也就是说页面还无法准确返回页面实际加载的进度,本文中我们使用jQuery来实现页面加载进度条效果. HTML 首先我们要知道的是,目前没有任何浏览器可以直接获取正在加载对象的大小.所以我们无法通过数据大小来实现0-100%的加载显示过程. 因此我们需要通过html代码逐行加载的特性,在整页代码的若干个跳跃行数中设置节点,进行
-
原生JS实现首页进度加载动画
js进度加载动画程序是本人的个人作品,写的不好,可以参考,但未经本人允许,请不要用于其它用途! 早上写了个首页进度加载动画,本想在我的博客里用上,测试发现博客园加载太快,根本看不到动画效果,直接就加载'Complete'了,算了,还是不要把博客搞得太臃肿了! 于是我就写了个演示页面,在body里加了个iframe来加载大一点的网站,这样就看出效果了! 用Safari打开貌似CSS动画的播放时间变成同步了,不知道什么原因,本地测试又没问题(请大神指点!),用Chrome.Firefox倒是没问题,
-
原生JS实现图片懒加载之页面性能优化
在项目开发中,我们往往会遇到一个页面需要加载很多图片的情况.我们可以一次性加载全部的图片,但是考虑到用户有可能只浏览部分图片.所以我们需要对图片加载进行优化,只加载浏览器窗口内的图片,当用户滚动时,再加载更多的图片.这种加载图片的方式叫做图片懒加载,又叫做按需加载或图片的延时加载.这样做的好处是:1.可以加快页面首屏渲染的速度:2.节约用户的流量. 一.实现思路 1.图片img标签自定义一个属性data-src来存放真实的地址. 2.当滚动页面时,检查所有的img标签,判断是否出现在事业中,如果
-
Android实现笑脸进度加载动画
最近看到豆瓣的笑脸loading很有意思,看一张效果图: 下面分析一下如何实现这样的效果: 1.默认状态是一张笑脸的状态(一个嘴巴,两个眼睛,默认状态) 2.开始旋转,嘴巴追上眼睛(合并状态) 3.追上以后自转一周(自转状态) 4.然后逐渐释放眼睛(分离状态) 5.回到初始笑脸状态(默认状态) 一.默认状态 首先需要确定好嘴巴和眼睛的初始位置,我这里的初始化嘴巴是一个半圆,在横轴下方.眼睛分别与横轴夹角60度,如下图: 这两部分可以使用pathMeasure,我这里使用最简单的两个api:can
-
使用jQuery或者原生js实现鼠标滚动加载页面新数据
相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多,用鼠标操作的时候相信都见过这样的效果:进入qq空间,向下拉动空间,到底部时,会动态加载剩余的说说或者是日志 ,今天我们就来看看他们的实现思路和js控制动态加载的代码. 下面的代码主要是控制滚动条下拉时的加载事件的,无论是加载图片还是加载记录数据 都可以. 加载jQuery库后我们可以这样使用: $(window).scroll(function () { var scrollTop = $(t
-
原生JS实现图片懒加载(lazyload)实例
前言 图片懒加载也是比较常见的一种性能优化的方法,最近在用vue做一个新闻列表的客户端时也用到了,这里就简单介绍下实现原理和部分代码. 实现原理 加载页面的时候,图片一直都是流量大头,针对图片的性能方法也挺多的比如base64.雪碧图等:懒加载也是其中一种,主要原理是将非首屏的图片src设为一个默认值,然后监听窗口滚动,当图片出现在视窗中时再给他赋予真实的图片地址,这样可以保证首屏的加载速度然后按需加载图片. 具体代码 首先在渲染时,图片引用默认图片,然后把真实地址放在data-*属性上面. <
-
原生javaScript实现图片延时加载的方法
本文实例讲述了原生javaScript实现图片延时加载的方法.图片延时加载其实是有jquery插件了并且加载方法非常的简单并且合理了,但有朋友觉得加载jquery插件包太大了,于时自己写了一个,给各位分享一下. 首先,图片延时加载可以节省我们带宽,获取到更好的用户体验,尤其对于图片多的站点,这一点显得至关重要,下面就跟大家探讨一下图片延时加载原理和实现代码. 图片延时加载原理 图片延时加载原理是在html里面的图片src填的并不是真正的图片地址,而是以一种自定义属性把图片地址赋给img标签,如:
-
分享8款优秀的 jQuery 加载动画和进度条插件
加载动画和进度条在网站和 Web 应用中的使用非常流行.虽然网速越来越快,但是我们的网站越来越复杂,同时用户对网站的使用体验的要求也越来越高.在内容加载缓慢的时候,使用时尚的加载动画和进度条告诉用户还有内容正在加载是一种非常好的方式.今天这篇文章向大家推荐10款基于 jQuery 实现的加载动画和进度条插件. Spin.js 最喜欢这款插件了,动画图片的长度.粗细.速度和角度都可以灵活控制,想要做成什么样都可以. 源码下载 在线演示 Percentage Loader 一款轻量的 jQue
-
layui 实现加载动画以及非真实加载进度的方法
近期在做一个网站的查询功能,但是由于数据量确实太大,分页查询后也是很慢,同时查询出的数据部分还要进行一些处理,导致用户说要我们给他们加一个查询进度,要百分比显示.加上加载动画很简单,layui有现成的.但是还要动画..我tm(手动微笑),原谅我水平比较低.然后就瞎搞,终于搞出了一个加载的进度,虽然还是假的... 上面废话有点多,直接切入正题. 首先是html代码.....(不存在的2333333........) 然后是js代码: //这里是必须要有的,_index的作用是用来关闭遮罩,详细看l
-
原生JS实现动态加载js文件并在加载成功后执行回调函数的方法
本文实例讲述了原生JS实现动态加载js文件并在加载成功后执行回调函数的方法.分享给大家供大家参考,具体如下: 有的时候需要动态加载一个javascript文件,并且在加载成功后执行回调函数(例如文件中保存了json数据之类的).要实现这样的功能,可以使用<script> 元素的load 事件(IE9+.chrome.FireFox等)和onreadystatechange 事件(IE8以下),直接上代码: function loadScript(src, callback) { var scr
-
JS Canvas定时器模拟动态加载动画
本文实例为大家分享了Canvas定时器动态加载动画,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> </style> </head> <body> <canvas id="canva