位置：首页>> 网络编程>> JavaScript>> 【JavaScript实用系列】-- 胖页面载入效果

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

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

标签：加载,loading,特效

【实用系列】-- 胖页面载入，加载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>

投稿

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

猜你喜欢