这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要为大家详细介绍了原生 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>
来源: http://www.phperz.com/article/17/0520/331876.html