【JavaScript实用系列】-- 胖页面载入效果

作者：satans17 来源：51js 时间：2009-10-19 22:48:00　

【实用系列】-- 胖页面载入，加载JavaScript效果

整理了一下代码，做了一些优化，算是最终版了。

完全不需要对其他文件做任何修改，就是所谓的无入侵吧。

对于需要载入文件较多的页面，还是蛮实用的。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>加载</title><style type="text/css"></style></head><body><div id="Mask"><div id="Show"></div></div><script language="javascript">function loading(config){this.config = config||{}this.files = new Array();//要加载的文件this.sum = 0;//总大小this.ready = 0;//已经加载this.begin = new Date(); //开始加载的时间this.timeout = this.config.timeout || 10000//超时时间this.id = null;//提示信息显示的IDthis.interval = null //定时器this.callback = null;//回调this.add = function(file){if(file.size && !isNaN(parseInt(file.size))){this.sum += parseInt(file.size);this.files.push(file);}}this.exist = function(f){try{eval("var o = " + f);if(o)return true;}catch(e){return false;}}this.show = function(id){var _this = this;var interval = 200;var html;_this.id = typeof(id)=='string'?document.getElementById(id):id;if(document.cookie && /loading/.test(document.cookie)){html = "<div class='title'>系统正在加载，请稍候...";}else{document.cookie="-loading=true";interval = 800;html = "<div class='title'>你是第一次登陆本站，可能需要较长的加载时间,请耐心等待...";}_this.id.innerHTML = html+" 已加载<span id='L-process'>0</span>％用时:<span id='L-time'>0</span> 秒 </div>";_this.interval = setInterval(this.interval(_this),interval);}this.interval = function(obj){return function(){var pt = new Date() - obj.begin;if( obj.ready<obj.sum && pt<obj.timeout ){for(var i=0;i<obj.files.length;i++){var t = obj.files[i];if(obj.exist(t.file)){obj.files.splice(i,1);obj.ready += t.size ;obj.id.innerHTML += "<p>>> "+t.file+"加载完毕...("+t.size+"k)</p>" ;document.getElementById("L-process").innerHTML = parseInt(obj.ready/obj.sum*100) ;//if(obj.first==200)break;}}document.getElementById("L-time").innerHTML = pt/1000;}else{clearInterval(obj.interval);obj.callback.call(this,obj,pt);}}}}var a = new loading();//var a = new loading({timeout:500});a.add({file:"File1",size:10});a.add({file:"Ext",size:20});a.add({file:"jQuery",size:30});a.add({file:"File2",size:50});a.add({file:"Class",size:60});a.add({file:"File3",size:70});a.callback = function(_this,time){if(time>10000){alert("系统已超时，请刷新后重试！");window.location.reload();return;}alert("文件加载完毕，点击进入页面！\n\n 耗时:"+time+"毫秒"); document.body.removeChild(document.getElementById("Mask"));a = null;};a.show("Show");//为了测试var File1 = {};var File2 = {};var File3 = {};</script><h1>https://www.aspxhome.com/</h1><hr /><p>很多BS结构的软件进入的第一个页面需要加载很多文件</p><p>我们目前在做的一个项目用的Extjs,除了Ext的文件，还有语言文件，Utils类等等，一个都是几十KB</p><p>进入首页的时候相当慢，给用户一种假死的感觉，体验相当不好</p><p>看了一些flash版的游戏（比如QQ农场），都有加载的效果觉得不错，就模仿一下 ^_______^ （笑脸也系模仿）</p><p>其实原理很简单，就是在加载页面完全加载之前循环判断对象是否存在，如果存在就明说明文件记载完成了</p><p>为了保证效率，这里还用到了cookie，第一次加载的时setTimeout(fun,200),之后就是setTimeout(fun,50)</p><p>更酷的页面进入效果可以写在回调函数中实现（比如改变Mask的透明度）</p><p>默认加载超时时间是10秒，可以在回调函数中判断如果超过10秒提示他刷新页面</p><p> </p><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script><script type="text/javascript" src="http://www.prototypejs.org/javascripts/prototype.js"></script><script type="text/javascript" src="http://www.extjs.com/assets/js/extjs.js"></script></body></html>

标签：加载,loading,特效

投稿

【JavaScript实用系列】-- 胖页面载入效果

猜你喜欢

Mysql 查询JSON结果的相关函数汇总

简单介绍Python中利用生成器实现的并发编程

pandas数据选取：df[] df.loc[] df.iloc[] df.ix[] df.at[] df.iat[]

SQL学习笔记六 union联合结果集使用

Python正则表达式中的量词符号与组问题小结

mysql Innodb表空间卸载、迁移、装载的使用方法

python实现ID3决策树算法

python特效之字符成像详解

Windows10下Tensorflow2.0 安装及环境配置教程(图文)

记得使用try+catch

Nodejs之TCP服务端与客户端聊天程序详解

layer弹出子iframe层父子页面传值的实现方法

python贪吃蛇核心功能实现上

Python编程中运用闭包时所需要注意的一些地方

opencv中颜色空间转换函数cv2.cvtColor()使用

二种python发送邮件实例讲解(python发邮件附件可以使用email模块实现)

python3实现暴力穷举博客园密码

python求质数列表的例子

JSP之表单提交get和post的区别详解及实例

Pandas对数值进行分箱操作的4种方法总结