lazyload延迟加载组件
lazyload现在网上已经用的很多(淘宝商城，新浪微博等等)，先放demo:mylazyLoad.zip
效果：
【基本原理】
在有大量数据加载的页面中，我们需要一个容器，这个容器可以是浏览器窗口，也可以是页面中的一个容器，在页面加载的时候，我们可以将这容器显示之外的内容阻止其加载，当我们滚动这个容器到相应区域的时候才将该区域内容加载出来，以此达到加快浏览速度的目的。
延迟加载一般分静态和动态两种。
静态的典型例子就是淘宝商城，我们在观察淘宝商城的html时发现，其页面采用了大量的textarea来存放页面元素，我们想要把页面元素存放在html里，而又不想这些元素被解析，同时又能轻松方便的获取，textarea正好满足了这些条件(真不知道哪位牛人想到的)。
而动态的可以说就是ajax获取数据再绑定，典型例子就是新浪微博，当页面滚动到底部时触发加载函数。
我的理解是将需要延迟加载的触发元素存入一个数组中，当容器scroll/resize时遍历这个数组，如果触发元素在视窗范围内就执行加载函数，并将这个元素从数组中删除来提高效率。
【程序说明】
一般在创建实例的时候，需要定义两个属性：elems和container，elems是触发加载的元素集合，或者说是加载内容集合，container就是容器。
1.因为elems需要进行删除，所以首先需要将elems转换为数组Array。
$A() code
/*将参数转换为数组
* @param {all} a 参数
*/
var $A=function(a){
if(!a)return [];
if(a instanceof Array) return a;
var arr=[],len=a.length;
if(/string|number/.test(typeof a)||a instanceof Function || len===undefined){
arr[0]=a;
}else{
for(var i=0;i<len;i++){
arr[i]=a[i];
}
}
return arr;
}
this.elems=$A(this.options.elems);/*加载对象转换成数组*/
* @param {all} a 参数
*/
var $A=function(a){
if(!a)return [];
if(a instanceof Array) return a;
var arr=[],len=a.length;
if(/string|number/.test(typeof a)||a instanceof Function || len===undefined){
arr[0]=a;
}else{
for(var i=0;i<len;i++){
arr[i]=a[i];
}
}
return arr;
}
this.elems=$A(this.options.elems);/*加载对象转换成数组*/
参数a可以是string,number,object,array,function,HTMLCollection,null。
PS：我发现object.length===undefined
2.container是容器，可以是window，也可以是页面元素，所以初始化时先判断是否是window。
container
var doc=document;
var isWin = c==window||c==doc||c==null||!c.tagName||/body|html/i.test(c.tagName);/*判断容器是否是window*/
if(isWin)c=doc.documentElement;
this.container=c;
var isWin = c==window||c==doc||c==null||!c.tagName||/body|html/i.test(c.tagName);/*判断容器是否是window*/
if(isWin)c=doc.documentElement;
this.container=c;
如果不是明确的非body/html的dom元素，将都视为容器为window。
3.获取container的显示范围，即容器相对于浏览器视窗左上角的top/bottom/left/right距离，如果是window，即浏览器视窗的大小。
getContainerRange
/*获取容器显示范围方法*/
var _getContainerRange=isWin&&window.innerWidth?function(){
return {top:0,left:0,right:window.innerWidth,bottom:window.innerHeight}
}:function(){
return _this._getRect(c);
}
this._refreshRange=function(){
_this.range=_getContainerRange();
}
this._refreshRange();
/*获取元素位置参数*/
_getRect:function(elem){
var r=elem.getBoundingClientRect();/*元素到窗口左上角距离*/
return {top:r.top,left:r.left,bottom:r.bottom,right:r.right}
}
var _getContainerRange=isWin&&window.innerWidth?function(){
return {top:0,left:0,right:window.innerWidth,bottom:window.innerHeight}
}:function(){
return _this._getRect(c);
}
this._refreshRange=function(){
_this.range=_getContainerRange();
}
this._refreshRange();
/*获取元素位置参数*/
_getRect:function(elem){
var r=elem.getBoundingClientRect();/*元素到窗口左上角距离*/
return {top:r.top,left:r.left,bottom:r.bottom,right:r.right}
}
获取浏览器视窗大小在IE下可以通过offsetWidth/offsetHeight获得，但非IE浏览器则略有差异，好在非IE下有innerWidth/innerHeight可以使用。另外还有dom.getBoundingClientRect()这个方法，它的作用是获得dom相对于视窗左上角的top/left/bottom/right距离，而且这个方法已经得到所有浏览器的支持，大大提高了我们的效率。
PS：getBoundingClientRect可以看下http://www.cnblogs.com/qieqing/archive/2008/10/06/1304399.html ，另外谈到IE下2px问题，因为这里我都是用这个方法来获取容器以及元素位置，所以这2px差异可以忽略，也许这不太严谨，但同时也为了提高点效率考虑。
4.接下来就是给container绑定scroll/resize事件。
addEventHandler
this._scrollload=function(){
if(!isWin){_this._refreshRange();}
_this._doLoad();
}
this._noWinScroll=function(){ /*解决刷新时window滚动条定位后造成range错误bug*/
_this.range=_getContainerRange();
removeEventHandler(window,"scroll",_this._noWinScroll);
}
this._resizeload=function(){
_this._refreshRange();
_this._doLoad();
}
this.binder = isWin ? window : c;
if(!isWin)addEventHandler(window,"scroll",this._noWinScroll);
addEventHandler(this.binder,"scroll",this._scrollload);
addEventHandler(this.binder,"resize",this._resizeload);
if(!isWin){_this._refreshRange();}
_this._doLoad();
}
this._noWinScroll=function(){ /*解决刷新时window滚动条定位后造成range错误bug*/
_this.range=_getContainerRange();
removeEventHandler(window,"scroll",_this._noWinScroll);
}
this._resizeload=function(){
_this._refreshRange();
_this._doLoad();
}
this.binder = isWin ? window : c;
if(!isWin)addEventHandler(window,"scroll",this._noWinScroll);
addEventHandler(this.binder,"scroll",this._scrollload);
addEventHandler(this.binder,"resize",this._resizeload);
container是window话，scroll是不会改变container的range的，而container是元素的话，range会随着window的scroll而改变，所以这里做分支处理。
另外当我们讲window的滚动条滚至中间位置，再F5刷新页面之后，滚动条同样会在刚刚的位置，IE下首先会将滚动条提至顶部，再定位到刚刚的位置，这样就出现了一个问题，在第一次执行lazyload的时候，container的range是window滚动条在顶部时候的值，而并非我们需要的实际值。所以我这里在非isWin情况下，给window绑定一次_noWinScroll事件，滚动条定位后删除这个事件。
5.下面讲的是具体的判断、执行
_doLoad
/*加载判断，防止多次调用
@lock锁定，加载过程中锁定。如果为false，执行加载；如果为true，延迟递归
*/
_doLoad:function(){
var _this=this;
if(!this.lock){
this.lock=true;
setTimeout(function(){_this._loadRun()},100);
}else{
clearTimeout(this.timer);
var self=arguments.callee;
this.timer=setTimeout(function(){self.call(_this)},100);
}
}
@lock锁定，加载过程中锁定。如果为false，执行加载；如果为true，延迟递归
*/
_doLoad:function(){
var _this=this;
if(!this.lock){
this.lock=true;
setTimeout(function(){_this._loadRun()},100);
}else{
clearTimeout(this.timer);
var self=arguments.callee;
this.timer=setTimeout(function(){self.call(_this)},100);
}
}
scroll事件在各个浏览器里的执行次数不同，最好的是FF，一次滚轮滚动只会执行一次，而其他浏览器或多或少的会执行多次。为了优化这点，用了一个lock判断，当在进行加载函数_loadRun时，我们锁住scroll，具体方法就是"clearTimeout(this.timer);this.timer=setTimeout(function(){_this._doLoad();},100);"，使用setTimeout延迟递归_doLoad，执行第二次递归前clearTimeout上一次，这样就能保证一次滚动只执行两次，开始一次，结束一次，中间的全部锁住。
_loadRun
/*加载运行*/
_loadRun:function(){
var elems=this.elems;
if(elems.length){
for(var i=0;i<elems.length;i++){
var rect=this._getRect(elems[i]);
var side=this._isRange(this._inRange(rect));
if(side&&side!=0){
if(side==1&&!this.elock){
this.elock=true;
this._onDataLoad(elems[i]);
elems.splice(i--,1);/*加载完之后将该对象从队列中删除*/
}else{break;}
}
}
if(!elems.length){
this._release();
}
}
this.lock=false;
}
_loadRun:function(){
var elems=this.elems;
if(elems.length){
for(var i=0;i<elems.length;i++){
var rect=this._getRect(elems[i]);
var side=this._isRange(this._inRange(rect));
if(side&&side!=0){
if(side==1&&!this.elock){
this.elock=true;
this._onDataLoad(elems[i]);
elems.splice(i--,1);/*加载完之后将该对象从队列中删除*/
}else{break;}
}
}
if(!elems.length){
this._release();
}
}
this.lock=false;
}
_inRange:function(rect){
var range=this.range;
var side={
v : rect.top<=range.bottom ? rect.bottom>=range.top ? "in" : "" : "bottom",/*垂直位置*/
h : rect.left<=range.right ? rect.right>=range.left ? "in" : "" : "right" /*水平位置*/
};
return side;
},
_isRange:function(side){
/*1：加载 -1：跳出循环 0：不加载执行下一个*/
return {
v:side.v ? side.v=="in"?1:-1 : 0,
h:side.h ? side.h=="in"?1:-1 : 0,
c:side.v&&side.h ? side.v=="in"&&side.h=="in"? 1:side.v!="in"?-1:0 : 0
}[this.mode||"c"]
}
var range=this.range;
var side={
v : rect.top<=range.bottom ? rect.bottom>=range.top ? "in" : "" : "bottom",/*垂直位置*/
h : rect.left<=range.right ? rect.right>=range.left ? "in" : "" : "right" /*水平位置*/
};
return side;
},
_isRange:function(side){
/*1：加载 -1：跳出循环 0：不加载执行下一个*/
return {
v:side.v ? side.v=="in"?1:-1 : 0,
h:side.h ? side.h=="in"?1:-1 : 0,
c:side.v&&side.h ? side.v=="in"&&side.h=="in"? 1:side.v!="in"?-1:0 : 0
}[this.mode||"c"]
}
这里的逻辑如下：
1)遍历elems数组，获取元素[0]的rect,根据rect和container的range做比较，判断元素[0]相对于container的位置("[top/left]","bottom/right","in")
2)再根据我们的mode获得操作类型(-1,0,1)。-1表示在容器显示范围的后面，之后的元素可以不再判断，执行跳出循环;0表示在容器显示范围的前面，不执行加载，进行下个元素的判断；1表示在显示范围内，需要加载。
3)当返回的side为1时，执行_onDataLoad()，然后从元素集合中删除该元素，用的方法是Array.splice(index,num)，同时i--，使得能准确的找到下个元素。这里的elock用来锁定元素加载，主要用在动态ajax加载的时候，因为动态加载的时候，我们希望当多个元素同时存在于container以及多次触发scroll时，只执行第一个元素的加载。
4)然后进行下个元素[1]的判断，重复之前的步骤。
5)当元素集合为空时，摧毁所有的绑定。
_release
_release:function(){
removeEventHandler(this.binder,"scroll",this._scrollload);
removeEventHandler(this.binder,"resize",this._resizeload);
this._onDataEnd();
}
removeEventHandler(this.binder,"scroll",this._scrollload);
removeEventHandler(this.binder,"resize",this._resizeload);
this._onDataEnd();
}
6._onDataLoad默认情况是静态加载。
_onDataLoad
/*删除Script字符串内容*/
String.prototype.removeJS=function(){
return this.replace(/<script[^>]*?>([\w\W]*?)<\/script>/ig,"");
}
/*将Script字符串转换为Script对象，返回Script or false*/
String.prototype.getJS=function(){
var js=this.replace(/[\s\S]*?<script[^>]*?>([\w\W]*?)<\/script>[\s\S]*?/g,"$1\r");
if(js==this){
return false;
}else{
var s=document.createElement("script");
s.text=js;
return s;
}
}
this._onDataLoad=this.options.ondataload || function(elem){ /*数据加载*/
var h=elem.getElementsByTagName("textarea");
if(h.length){
var js=h[0].value.getJS(); /*解决innerHTML javascript不执行的问题*/
if(js){
elem.innerHTML=h[0].value.removeJS(); /*删除javascript字符串*/
elem.appendChild(js);
}else{
elem.innerHTML=h[0].value;
}
}
this.elock=false;
}
String.prototype.removeJS=function(){
return this.replace(/<script[^>]*?>([\w\W]*?)<\/script>/ig,"");
}
/*将Script字符串转换为Script对象，返回Script or false*/
String.prototype.getJS=function(){
var js=this.replace(/[\s\S]*?<script[^>]*?>([\w\W]*?)<\/script>[\s\S]*?/g,"$1\r");
if(js==this){
return false;
}else{
var s=document.createElement("script");
s.text=js;
return s;
}
}
this._onDataLoad=this.options.ondataload || function(elem){ /*数据加载*/
var h=elem.getElementsByTagName("textarea");
if(h.length){
var js=h[0].value.getJS(); /*解决innerHTML javascript不执行的问题*/
if(js){
elem.innerHTML=h[0].value.removeJS(); /*删除javascript字符串*/
elem.appendChild(js);
}else{
elem.innerHTML=h[0].value;
}
}
this.elock=false;
}
这里主要说的是html里的javascript代码问题，通过innerHTML的javascript代码是不会执行的，所以在这里需要提取html里的script代码，创建一个script元素，appendChild进容器内才能执行。
【总结】
总的来说在优化上以及需求的考虑上都有了提高。也越来越喜欢用自己整理的框架去组件，这样就能做到不仅知其然而且还能知其所以然。希望今后能在算法上得到指点。
demo丑了点，大家凑合凑合(^。^)y-~~
【完整代码】
javascript library
// JavaScript Document
/*my javascript library v1.2*/
/*written by Lecaf*/
/*update by 2011.4.12*/
/*删除Script字符串内容*/
String.prototype.removeJS=function(){
return this.replace(/<script[^>]*?>([\w\W]*?)<\/script>/ig,'');
}
/*将Script字符串转换为Script对象，返回Script or false*/
String.prototype.getJS=function(){
var js=this.replace(/[\s\S]*?<script[^>]*?>([\w\W]*?)<\/script>[\s\S]*?/g,'$1\r');
if(js==this){
return false;
}else{
var s=document.createElement('script');
s.text=js;
return s;
}
}
/*getElementById
* @param {String} id ID值
*/
var $id = function(id){
if(typeof id!='undefined' && typeof id === 'string'){
return document.getElementById(id);
}
return null;
}
/*讲参数转换为数组
* @param {all} a 参数
*/
var $A=function(a){
if(!a)return [];
if(a instanceof Array) return a;
var arr=[],len=a.length;
if(/string|number/.test(typeof a)||a instanceof Function || len===undefined){
arr[0]=a;
}else{
for(var i=0;i<len;i++){
arr[i]=a[i];
}
}
return arr;
}
/*注销事件
* @param {Object} oTarget 对象
* @param {String} sEventType 事件类型
* @param {Function} fnHandler 事件方法
*/
var removeEventHandler=function(oTarget, sEventType, fnHandler) {
if(oTarget.listeners[sEventType]){
var listeners=oTarget.listeners[sEventType];
for(var i=0,fn;fn=listeners[i++];){
if(fn==fnHandler){
listeners.splice(--i,1);
}
}
if(!listeners.length&&listeners["_handler"]){
oTarget.removeEventListener ? oTarget.removeEventListener(sEventType, listeners["_handler"], false) : oTarget.detachEvent('on' + sEventType, listeners["_handler"]);
}
}
}
/*添加事件
* @param {Object} oTarget 对象
* @param {String} sEventType 事件类型
* @param {Function} fnHandler 事件方法
*/
var addEventHandler=function(oTarget, sEventType, fnHandler) {
oTarget.listeners=oTarget.listeners||{};
var listeners = oTarget.listeners[sEventType] = oTarget.listeners[sEventType]||[];
listeners.push(fnHandler);
if(!listeners["_handler"]){
listeners["_handler"]=function(e){
var e=e||window.event;
for(var i=0,fn;fn=listeners[i++];){
fn.call(oTarget,e)
}
}
oTarget.addEventListener ? oTarget.addEventListener(sEventType, listeners["_handler"], false) : oTarget.attachEvent('on' + sEventType, listeners["_handler"]);
}
}
/*触发事件
* @param {Object} oTarget 对象
* @param {String} sEventType 事件类型
*/
var dispatchEventHandler=function(oTarget,sEventType){
if(oTarget.dispatchEvent){
var e=document.createEvent('Event');
e.initEvent(sEventType,true,true);
oTarget.dispatchEvent(e);
}else{
oTarget.fireEvent('on'+sEventType);
}
}
/*json扩展
* @param {Object} target 目标json
* @param {Object} src 源json
*/
var extendJson=function(target,src){
for(var para in src){
target[para]=src[para];
}
return target;
}
/*在目标元素之后插入新元素 js自带方法: target.appendChild(newDoc);target.insertBefore(newDoc,existingChild);
* @param {Document} newEl 新元素
* @param {Document} targetEl 目标元素
*/
var insertAfter=function(newEl,targetEl){
var parentEl = targetEl.parentNode;
if(parentEl.lastChild == targetEl){
parentEl.appendChild(newEl);
}else{
parentEl.insertBefore(newEl,targetEl.nextSibling);
}
}
/*动态加载CSS文件
* @param {String} file css路径
* @param {String} cssid css link ID
*/
var loadCSS=function (file,cssid){
var cssTag = cssid ? document.getElementById(cssid) : null;
var head = document.getElementsByTagName('head').item(0);
if(cssTag) head.removeChild(cssTag);
css = document.createElement('link');
css.href = file;
css.rel = 'stylesheet';
css.type = 'text/css';
if(cssid){css.id = cssid;}
head.appendChild(css);
}
/*ajax封装
* @param {Object} options 参数集
* @param {String} url 链接
* @param {String} type 传参方式 'POST' or 'GET'（默认）
* @param {Bool} async 是否异步 true异步（默认） false同步
* @param {String} dataType 返回数据类型 'html'（默认） 'xml' 'json'
* @param {Function} beforeSend 发送请求前调用函数
* @param {Function} success 请求成功后回调函数
* @param {Function} complete 请求完成后回调函数（不管成功与否）
*/
var ajaxFun = function(options){
var ajaxops={
url:'',
type:'GET',
async:true,
dataType:'html',
beforeSend:null,
success:function(){},
complete:null
}
var ajaxops = extendJson(ajaxops,options);
if(ajaxops.url){
var xmlHttp;
try{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}catch (e){
// Internet Explorer
try{
xmlHttp=new ActiveXObject('Msxml2.XMLHTTP');
}catch (e){
try{
xmlHttp=new ActiveXObject('Microsoft.XMLHTTP');
}catch (e){
alert('您的浏览器不支持AJAX！');
return false;
}
}
}
var requestDone=false;
if(!ajaxops.async&&navigator.userAgent.indexOf('Firefox')>0){
xmlHttp.onload=function(){
if(( xmlHttp.status >= 200 && xmlHttp.status < 300 ) || xmlHttp.status === 304 || xmlHttp.status === 1223 || xmlHttp.status === 0){
var msg;
switch(ajaxops.dataType){
case 'html':
msg=xmlHttp.responseText;
break;
case 'xml':
msg=xmlHttp.responseXML;
break;
case 'json':
msg=xmlHttp.responseText;
msg=(new Function('return '+msg))();
break;
default:
msg=xmlHttp.responseText;
break;
}
ajaxops.success(msg);
}
if(ajaxops.complete && !requestDone){
ajaxops.complete(msg);
requestDone=true;
}
}
}else{
xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState===4){
if(( xmlHttp.status >= 200 && xmlHttp.status < 300 ) || xmlHttp.status === 304 || xmlHttp.status === 1223 || xmlHttp.status === 0){
var msg;
switch(ajaxops.dataType){
case 'html':
msg=xmlHttp.responseText;
break;
case 'xml':
msg=xmlHttp.responseXML;
break;
case 'json':
msg=xmlHttp.responseText;
msg=(new Function('return '+msg))();
break;
default:
msg=xmlHttp.responseText;
break;
}
ajaxops.success(msg);
}
if(ajaxops.complete && !requestDone){
ajaxops.complete(msg);
requestDone=true;
}
}
}
}
if(ajaxops.beforeSend){
ajaxops.beforeSend();
}
xmlHttp.open(ajaxops.type,ajaxops.url,ajaxops.async);
xmlHttp.send(null);
}
}
/*
* $class 写类工具函数
* @param {Function} constructor
* @param {Object} prototype
* write by Snandy http://www.cnblogs.com/snandy/
*/
var $class = function(constructor,prototype) {
var c = constructor || function(){};
var p = prototype || {};
return function() {
for(var atr in p) {
arguments.callee.prototype[atr] = p[atr];
}
c.apply(this,arguments);
}
}
/*my javascript library v1.2*/
/*written by Lecaf*/
/*update by 2011.4.12*/
/*删除Script字符串内容*/
String.prototype.removeJS=function(){
return this.replace(/<script[^>]*?>([\w\W]*?)<\/script>/ig,'');
}
/*将Script字符串转换为Script对象，返回Script or false*/
String.prototype.getJS=function(){
var js=this.replace(/[\s\S]*?<script[^>]*?>([\w\W]*?)<\/script>[\s\S]*?/g,'$1\r');
if(js==this){
return false;
}else{
var s=document.createElement('script');
s.text=js;
return s;
}
}
/*getElementById
* @param {String} id ID值
*/
var $id = function(id){
if(typeof id!='undefined' && typeof id === 'string'){
return document.getElementById(id);
}
return null;
}
/*讲参数转换为数组
* @param {all} a 参数
*/
var $A=function(a){
if(!a)return [];
if(a instanceof Array) return a;
var arr=[],len=a.length;
if(/string|number/.test(typeof a)||a instanceof Function || len===undefined){
arr[0]=a;
}else{
for(var i=0;i<len;i++){
arr[i]=a[i];
}
}
return arr;
}
/*注销事件
* @param {Object} oTarget 对象
* @param {String} sEventType 事件类型
* @param {Function} fnHandler 事件方法
*/
var removeEventHandler=function(oTarget, sEventType, fnHandler) {
if(oTarget.listeners[sEventType]){
var listeners=oTarget.listeners[sEventType];
for(var i=0,fn;fn=listeners[i++];){
if(fn==fnHandler){
listeners.splice(--i,1);
}
}
if(!listeners.length&&listeners["_handler"]){
oTarget.removeEventListener ? oTarget.removeEventListener(sEventType, listeners["_handler"], false) : oTarget.detachEvent('on' + sEventType, listeners["_handler"]);
}
}
}
/*添加事件
* @param {Object} oTarget 对象
* @param {String} sEventType 事件类型
* @param {Function} fnHandler 事件方法
*/
var addEventHandler=function(oTarget, sEventType, fnHandler) {
oTarget.listeners=oTarget.listeners||{};
var listeners = oTarget.listeners[sEventType] = oTarget.listeners[sEventType]||[];
listeners.push(fnHandler);
if(!listeners["_handler"]){
listeners["_handler"]=function(e){
var e=e||window.event;
for(var i=0,fn;fn=listeners[i++];){
fn.call(oTarget,e)
}
}
oTarget.addEventListener ? oTarget.addEventListener(sEventType, listeners["_handler"], false) : oTarget.attachEvent('on' + sEventType, listeners["_handler"]);
}
}
/*触发事件
* @param {Object} oTarget 对象
* @param {String} sEventType 事件类型
*/
var dispatchEventHandler=function(oTarget,sEventType){
if(oTarget.dispatchEvent){
var e=document.createEvent('Event');
e.initEvent(sEventType,true,true);
oTarget.dispatchEvent(e);
}else{
oTarget.fireEvent('on'+sEventType);
}
}
/*json扩展
* @param {Object} target 目标json
* @param {Object} src 源json
*/
var extendJson=function(target,src){
for(var para in src){
target[para]=src[para];
}
return target;
}
/*在目标元素之后插入新元素 js自带方法: target.appendChild(newDoc);target.insertBefore(newDoc,existingChild);
* @param {Document} newEl 新元素
* @param {Document} targetEl 目标元素
*/
var insertAfter=function(newEl,targetEl){
var parentEl = targetEl.parentNode;
if(parentEl.lastChild == targetEl){
parentEl.appendChild(newEl);
}else{
parentEl.insertBefore(newEl,targetEl.nextSibling);
}
}
/*动态加载CSS文件
* @param {String} file css路径
* @param {String} cssid css link ID
*/
var loadCSS=function (file,cssid){
var cssTag = cssid ? document.getElementById(cssid) : null;
var head = document.getElementsByTagName('head').item(0);
if(cssTag) head.removeChild(cssTag);
css = document.createElement('link');
css.href = file;
css.rel = 'stylesheet';
css.type = 'text/css';
if(cssid){css.id = cssid;}
head.appendChild(css);
}
/*ajax封装
* @param {Object} options 参数集
* @param {String} url 链接
* @param {String} type 传参方式 'POST' or 'GET'（默认）
* @param {Bool} async 是否异步 true异步（默认） false同步
* @param {String} dataType 返回数据类型 'html'（默认） 'xml' 'json'
* @param {Function} beforeSend 发送请求前调用函数
* @param {Function} success 请求成功后回调函数
* @param {Function} complete 请求完成后回调函数（不管成功与否）
*/
var ajaxFun = function(options){
var ajaxops={
url:'',
type:'GET',
async:true,
dataType:'html',
beforeSend:null,
success:function(){},
complete:null
}
var ajaxops = extendJson(ajaxops,options);
if(ajaxops.url){
var xmlHttp;
try{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}catch (e){
// Internet Explorer
try{
xmlHttp=new ActiveXObject('Msxml2.XMLHTTP');
}catch (e){
try{
xmlHttp=new ActiveXObject('Microsoft.XMLHTTP');
}catch (e){
alert('您的浏览器不支持AJAX！');
return false;
}
}
}
var requestDone=false;
if(!ajaxops.async&&navigator.userAgent.indexOf('Firefox')>0){
xmlHttp.onload=function(){
if(( xmlHttp.status >= 200 && xmlHttp.status < 300 ) || xmlHttp.status === 304 || xmlHttp.status === 1223 || xmlHttp.status === 0){
var msg;
switch(ajaxops.dataType){
case 'html':
msg=xmlHttp.responseText;
break;
case 'xml':
msg=xmlHttp.responseXML;
break;
case 'json':
msg=xmlHttp.responseText;
msg=(new Function('return '+msg))();
break;
default:
msg=xmlHttp.responseText;
break;
}
ajaxops.success(msg);
}
if(ajaxops.complete && !requestDone){
ajaxops.complete(msg);
requestDone=true;
}
}
}else{
xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState===4){
if(( xmlHttp.status >= 200 && xmlHttp.status < 300 ) || xmlHttp.status === 304 || xmlHttp.status === 1223 || xmlHttp.status === 0){
var msg;
switch(ajaxops.dataType){
case 'html':
msg=xmlHttp.responseText;
break;
case 'xml':
msg=xmlHttp.responseXML;
break;
case 'json':
msg=xmlHttp.responseText;
msg=(new Function('return '+msg))();
break;
default:
msg=xmlHttp.responseText;
break;
}
ajaxops.success(msg);
}
if(ajaxops.complete && !requestDone){
ajaxops.complete(msg);
requestDone=true;
}
}
}
}
if(ajaxops.beforeSend){
ajaxops.beforeSend();
}
xmlHttp.open(ajaxops.type,ajaxops.url,ajaxops.async);
xmlHttp.send(null);
}
}
/*
* $class 写类工具函数
* @param {Function} constructor
* @param {Object} prototype
* write by Snandy http://www.cnblogs.com/snandy/
*/
var $class = function(constructor,prototype) {
var c = constructor || function(){};
var p = prototype || {};
return function() {
for(var atr in p) {
arguments.callee.prototype[atr] = p[atr];
}
c.apply(this,arguments);
}
}
lazyload
// JavaScript Document
/*Lazyload v1.2*/
/*written by Lecaf*/
/*update by 2011.4.8*/
var Lazyload=function(options){
this._init(options);/*初始化*/
this._doLoad();/*第一次加载*/
if(!this.elems.length)this._release();/*如果加载元素为空，释放*/
}
var proto={
/*初始化参数*/
_init:function(options){
this.binder=null; /*加载容器对象*/
this.range={}; /*加载容器显示范围*/
this.elems=[];/*加载对象队列*/
this.container=null;
this.mode="";
this.lock=false;/*加载容器锁定*/
this.elock=false;/*加载元素锁定*/
this.timer=null;/*_doLoad计时器*/
this.options={ /*定制参数*/
container:window,/*加载容器*/
elems:null,/*加载数据集合*/
mode:"v",/*加载模式 v(垂直加载) h(水平加载) c(交叉加载) 默认v*/
ondataload:null,/*数据加载方式*/
ondataend:function(){}/*数据加载完毕*/
}
extendJson(this.options,options||{});
this.elems=$A(this.options.elems);/*加载对象转换成数组*/
this.mode=this.options.mode;
this._onDataLoad=this.options.ondataload || function(elem){ /*数据加载*/
var h=elem.getElementsByTagName("textarea");
if(h.length){
var js=h[0].value.getJS(); /*解决innerHTML javascript不执行的问题*/
if(js){
elem.innerHTML=h[0].value.removeJS(); /*删除javascript字符串*/
elem.appendChild(js);
}else{
elem.innerHTML=h[0].value;
}
}
this.elock=false;
}
this._onDataEnd=this.options.ondataend; /*所有内容加载完执行*/
this._initContainer(this.options.container);/*初始化容器*/
},
/*初始化容器*/
_initContainer:function(c){
var doc=document;
var _this=this;
var isWin = c==window||c==doc||c==null||!c.tagName||/body|html/i.test(c.tagName);/*判断容器是否是window*/
if(isWin)c=doc.documentElement;
this.container=c;
/*获取容器显示范围方法*/
var _getContainerRange=isWin&&window.innerWidth?function(){
return {top:0,left:0,right:window.innerWidth,bottom:window.innerHeight}
}:function(){
return _this._getRect(c);
}
this._refreshRange=function(){
_this.range=_getContainerRange();
}
this._refreshRange();
this._scrollload=function(){
if(!isWin){_this._refreshRange();}
_this._doLoad();
}
this._noWinScroll=function(){ /*解决刷新时window滚动条定位后造成range错误bug*/
_this.range=_getContainerRange();
removeEventHandler(window,"scroll",_this._noWinScroll);
}
this._resizeload=function(){
_this._refreshRange();
_this._doLoad();
}
this.binder = isWin ? window : c;
if(!isWin)addEventHandler(window,"scroll",this._noWinScroll);
addEventHandler(this.binder,"scroll",this._scrollload);
addEventHandler(this.binder,"resize",this._resizeload);
},
/*获取元素位置参数*/
_getRect:function(elem){
var r=elem.getBoundingClientRect();/*元素到窗口左上角距离*/
return {top:r.top,left:r.left,bottom:r.bottom,right:r.right}
},
/*加载判断，防止多次调用
@lock锁定，加载过程中锁定。如果为false，执行加载；如果为true，延迟递归
*/
_doLoad:function(){
var _this=this;
if(!this.lock){
this.lock=true;
setTimeout(function(){_this._loadRun()},100);
}else{
clearTimeout(this.timer);
var self=arguments.callee;
this.timer=setTimeout(function(){self.call(_this)},100);
}
},
/*加载运行*/
_loadRun:function(){
var elems=this.elems;
if(elems.length){
for(var i=0;i<elems.length;i++){
var rect=this._getRect(elems[i]);
var side=this._isRange(this._inRange(rect));
if(side&&side!=0){
if(side==1&&!this.elock){
this.elock=true;
this._onDataLoad(elems[i]);
elems.splice(i--,1);/*加载完之后将该对象从队列中删除*/
}else{break;}
}
}
if(!elems.length){
this._release();
}
}
this.lock=false;
},
/*判断对象相对容器位置*/
_inRange:function(rect){
var range=this.range;
var side={
v : rect.top<=range.bottom ? rect.bottom>=range.top ? "in" : "" : "bottom",/*垂直位置*/
h : rect.left<=range.right ? rect.right>=range.left ? "in" : "" : "right" /*水平位置*/
};
return side;
},
_isRange:function(side){
/*1：加载 -1：跳出循环 0：不加载执行下一个*/
return {
v:side.v ? side.v=="in"?1:-1 : 0,
h:side.h ? side.h=="in"?1:-1 : 0,
c:side.v&&side.h ? side.v=="in"&&side.h=="in"? 1:side.v!="in"?-1:0 : 0
}[this.mode||"c"]
},
/*释放*/
_release:function(){
removeEventHandler(this.binder,"scroll",this._scrollload);
removeEventHandler(this.binder,"resize",this._resizeload);
this._onDataEnd();
}
}
window.onload=function(){
var Divload=$class(Lazyload,proto);
var divload=new Divload({
elems:document.getElementById("loadmain").getElementsByTagName("div"),
container:$id("loadbox"),
mode:"c"
});
var Winload=$class(Lazyload,proto);
var winload=new Winload({
elems:$id("ajaxbox").getElementsByTagName("div"),
container:window,
ondataload:function(elem){
var othis=this;
ajaxFun({
url:"ajax.html",
beforeSend:function(){
elem.getElementsByTagName("p")[0].style.display="";
},
success:function(msg){
var box=document.getElementById("ajaxload");
box.innerHTML=box.innerHTML+msg;
},
complete:function(){
othis.elock=false;
}
})
}
})
}
/*Lazyload v1.2*/
/*written by Lecaf*/
/*update by 2011.4.8*/
var Lazyload=function(options){
this._init(options);/*初始化*/
this._doLoad();/*第一次加载*/
if(!this.elems.length)this._release();/*如果加载元素为空，释放*/
}
var proto={
/*初始化参数*/
_init:function(options){
this.binder=null; /*加载容器对象*/
this.range={}; /*加载容器显示范围*/
this.elems=[];/*加载对象队列*/
this.container=null;
this.mode="";
this.lock=false;/*加载容器锁定*/
this.elock=false;/*加载元素锁定*/
this.timer=null;/*_doLoad计时器*/
this.options={ /*定制参数*/
container:window,/*加载容器*/
elems:null,/*加载数据集合*/
mode:"v",/*加载模式 v(垂直加载) h(水平加载) c(交叉加载) 默认v*/
ondataload:null,/*数据加载方式*/
ondataend:function(){}/*数据加载完毕*/
}
extendJson(this.options,options||{});
this.elems=$A(this.options.elems);/*加载对象转换成数组*/
this.mode=this.options.mode;
this._onDataLoad=this.options.ondataload || function(elem){ /*数据加载*/
var h=elem.getElementsByTagName("textarea");
if(h.length){
var js=h[0].value.getJS(); /*解决innerHTML javascript不执行的问题*/
if(js){
elem.innerHTML=h[0].value.removeJS(); /*删除javascript字符串*/
elem.appendChild(js);
}else{
elem.innerHTML=h[0].value;
}
}
this.elock=false;
}
this._onDataEnd=this.options.ondataend; /*所有内容加载完执行*/
this._initContainer(this.options.container);/*初始化容器*/
},
/*初始化容器*/
_initContainer:function(c){
var doc=document;
var _this=this;
var isWin = c==window||c==doc||c==null||!c.tagName||/body|html/i.test(c.tagName);/*判断容器是否是window*/
if(isWin)c=doc.documentElement;
this.container=c;
/*获取容器显示范围方法*/
var _getContainerRange=isWin&&window.innerWidth?function(){
return {top:0,left:0,right:window.innerWidth,bottom:window.innerHeight}
}:function(){
return _this._getRect(c);
}
this._refreshRange=function(){
_this.range=_getContainerRange();
}
this._refreshRange();
this._scrollload=function(){
if(!isWin){_this._refreshRange();}
_this._doLoad();
}
this._noWinScroll=function(){ /*解决刷新时window滚动条定位后造成range错误bug*/
_this.range=_getContainerRange();
removeEventHandler(window,"scroll",_this._noWinScroll);
}
this._resizeload=function(){
_this._refreshRange();
_this._doLoad();
}
this.binder = isWin ? window : c;
if(!isWin)addEventHandler(window,"scroll",this._noWinScroll);
addEventHandler(this.binder,"scroll",this._scrollload);
addEventHandler(this.binder,"resize",this._resizeload);
},
/*获取元素位置参数*/
_getRect:function(elem){
var r=elem.getBoundingClientRect();/*元素到窗口左上角距离*/
return {top:r.top,left:r.left,bottom:r.bottom,right:r.right}
},
/*加载判断，防止多次调用
@lock锁定，加载过程中锁定。如果为false，执行加载；如果为true，延迟递归
*/
_doLoad:function(){
var _this=this;
if(!this.lock){
this.lock=true;
setTimeout(function(){_this._loadRun()},100);
}else{
clearTimeout(this.timer);
var self=arguments.callee;
this.timer=setTimeout(function(){self.call(_this)},100);
}
},
/*加载运行*/
_loadRun:function(){
var elems=this.elems;
if(elems.length){
for(var i=0;i<elems.length;i++){
var rect=this._getRect(elems[i]);
var side=this._isRange(this._inRange(rect));
if(side&&side!=0){
if(side==1&&!this.elock){
this.elock=true;
this._onDataLoad(elems[i]);
elems.splice(i--,1);/*加载完之后将该对象从队列中删除*/
}else{break;}
}
}
if(!elems.length){
this._release();
}
}
this.lock=false;
},
/*判断对象相对容器位置*/
_inRange:function(rect){
var range=this.range;
var side={
v : rect.top<=range.bottom ? rect.bottom>=range.top ? "in" : "" : "bottom",/*垂直位置*/
h : rect.left<=range.right ? rect.right>=range.left ? "in" : "" : "right" /*水平位置*/
};
return side;
},
_isRange:function(side){
/*1：加载 -1：跳出循环 0：不加载执行下一个*/
return {
v:side.v ? side.v=="in"?1:-1 : 0,
h:side.h ? side.h=="in"?1:-1 : 0,
c:side.v&&side.h ? side.v=="in"&&side.h=="in"? 1:side.v!="in"?-1:0 : 0
}[this.mode||"c"]
},
/*释放*/
_release:function(){
removeEventHandler(this.binder,"scroll",this._scrollload);
removeEventHandler(this.binder,"resize",this._resizeload);
this._onDataEnd();
}
}
window.onload=function(){
var Divload=$class(Lazyload,proto);
var divload=new Divload({
elems:document.getElementById("loadmain").getElementsByTagName("div"),
container:$id("loadbox"),
mode:"c"
});
var Winload=$class(Lazyload,proto);
var winload=new Winload({
elems:$id("ajaxbox").getElementsByTagName("div"),
container:window,
ondataload:function(elem){
var othis=this;
ajaxFun({
url:"ajax.html",
beforeSend:function(){
elem.getElementsByTagName("p")[0].style.display="";
},
success:function(msg){
var box=document.getElementById("ajaxload");
box.innerHTML=box.innerHTML+msg;
},
complete:function(){
othis.elock=false;
}
})
}
})
}
