图片延迟加载
工作需要写了一个简单的图片延迟加载 【效果预览】
大概思路如下：
获取所有需要延迟加载的图片，根据位置进行排序，触发滚动条或window窗口大小的时候判断哪些图片在当前可见区域，以此类推，完毕之后删除事件，完成。
写代码的时候大概思路如下：
1、默认给需要延迟的图片src设置成一张1px的透明gif图片，把图片路径存储到img的一个叫"_src"的属性当中(属性名自定义)。
2、给需要延迟加载的图片一个标识，我这里用的一个class叫"loadImg"的名字。
3、获取所有标识的对象，然后根据其位置进行排序。这个方法可以参考源代码里边初始化时候的sortNumber方法。这个是用来排序的，其中tool.getPos()是用来获取元素位置的。tool.getPos方法算出的坐标并非兼容所有情况，一般是可行的。计算元素坐标的方法比较复杂，我一般粗略估算的，如果一定要细化可以参考jquery源代码里头的offset的实现方法。
4、给滚动和窗口大小变化绑定事件，并把数组里头符合条件的图片清除。
html部分：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
<title>getElePosition</title>
<meta charset="utf-8" />
<style type="text/css">
*{margin: 0;padding: 0;}
body{background: #ccc;}
img{display:block;}
.loadImg{background: url(http://preview.zcool.com.cn/upimg/allimg/070622/05043120.gif) no-repeat center;}
</style>
</head>
<body>
<img class="loadImg" src="http://www.js63.net/demo/js/2012/3/transparent.gif" width="550" height="400" _src="http://deskcity.com/picture/image_url/84384/Concept_028019.jpg?1309370822" alt="" />
<img class="loadImg" src="http://www.js63.net/demo/js/2012/3/transparent.gif" width="550" height="400" _src="http://deskcity.com/picture/image_url/84366/Concept_028001.jpg?1309370284" alt="" />
<img class="loadImg" src="http://www.js63.net/demo/js/2012/3/transparent.gif" width="550" height="400" _src="http://deskcity.com/picture/image_url/84367/Concept_028002.jpg?1309370338" alt="" />
<img class="loadImg" src="http://www.js63.net/demo/js/2012/3/transparent.gif" width="550" height="400" _src="http://deskcity.com/picture/image_url/84368/Concept_028003.jpg?1309371571" alt="" />
<img class="loadImg" src="http://www.js63.net/demo/js/2012/3/transparent.gif" width="550" height="400" _src="http://deskcity.com/picture/image_url/84369/Concept_028004.jpg?1309370717" alt="" />
<img class="loadImg" src="http://www.js63.net/demo/js/2012/3/transparent.gif" width="550" height="400" _src="http://deskcity.com/picture/image_url/84371/Concept_028006.jpg?1309370735" alt="" />
<img class="loadImg" src="http://www.js63.net/demo/js/2012/3/transparent.gif" width="550" height="400" _src="http://deskcity.com/picture/image_url/84372/Concept_028007.jpg?1309370744" alt="" />
<img class="loadImg" src="http://www.js63.net/demo/js/2012/3/transparent.gif" width="550" height="400" _src="http://deskcity.com/picture/image_url/84373/Concept_028008.jpg?1309370757" alt="" />
<img style="position:absolute;left:0px;top:25px;" class="loadImg" src="http://www.js63.net/demo/js/2012/3/transparent.gif" width="550" height="400" _src="http://deskcity.com/picture/image_url/84374/Concept_028009.jpg?1309370761" alt="简便文件上传" />
</body>
</html>
js部分：
var tool={ $:function(id){ return typeof id==="object"?id:document.getElementById(id) }, $$:function(tagName,oParent){ return(oParent||document).getElementsByTagName(tagName) }, $$$:function(className,tagName,elem){ var i=0,aClass=[], reClass=new RegExp("(^|\\s)"+className+"(\\s|$)"), aElement=tool.$$(tagName||"*",elem||document); for(i=0;i<aElement.length;i++) reClass.test(aElement[i].className)&&aClass.push(aElement[i]); return aClass }, addClass:function(elem,value){ !elem.className ? elem.className = value : elem.className += " " + value }, removeClass:function(elem,className){ var reg=new RegExp('(\\s|^)'+className+'(\\s|$)'); var ematch=elem.className.match(reg); if(ematch)elem.className=elem.className.replace(reg,' ') }, addHandler:function(ele,type,handler){ // var list = {a:["addEventListener","attachEvent"],r:["removeEventListener","datachEvent"]}; var name = arguments[3]===true ? list["r"]:list["a"]; if(ele[name[0]]){ ele[name[0]](type,handler,false) }else if(ele.attachEvent){ document.title = name[1]; ele[name[1]]("on"+type,handler); }else{ var handler = arguments[3]===true ? handler : null; ele["on"+type] = handler; } }, removeHandler:function(ele,type,handler){// this.addHandler(ele,type,handler,true); }, getPos:function(ele){ if(!ele)return; var left = 0,top = 0; if("getBoundingClientRect" in document.documentElement){ var box = ele.getBoundingClientRect(), doc = ele.ownerDocument, body = doc.body, docElem = doc.documentElement, clientTop = doc.clientTop || body.clientTop || 0, clientLeft = doc.clientLeft || body.clientLeft || 0 , left = box.left + (self.pageXOffset || docElem && docElem.scrollLeft || body.scrollTop) - clientLeft, top = box.top + (self.pageYOffset || docElem && docElem.scrollTop || body.scrollTop) - clientTop; }else{ do{ top+=ele.offsetTop, left+=ele.offsetLeft, ele = elel.offsetParent; }while(ele) }; return {left:left,top:top} }, getW:function(){ var client_h,client_w,scrollTop; client_h = document.documentElement.clientHeight || document.body.clientHeight;5 client_w = document.documentElement.clientWidth || document.body.clientWidth; scrollTop = document.documentElement.scrollTop || document.body.scrollTop; return o = {w:client_w,h:client_h,s:scrollTop}; } } //lazyLoadImg Object var lazyLoadImg = { init:function(cName){ var that = this; that.timer = null; that.cName = cName; that.imgList = tool.$$$(that.cName,"img"); for(var i = 0,l = this.imgList.length;i<l;i++){ var c = this.imgList[i]; c.t = tool.getPos(c)["top"]; }; function sortNumber(a,b){ return a["t"] -b["t"]; }; this.imgList.sort(sortNumber); that.setLoad(); that.oldScroll = window.onscroll; that.oldResize = window.onresize; if(typeof that.oldScroll=="function"){ window.onscroll = function(){ that.oldScroll(); that.timeLoad(); }; }else{ window.onscroll = function(){ that.timeLoad(); }; }; if(typeof that.oldResize == "function"){ window.onresize = function(){ that.oldResize(); that.timeLoad(); } }else{ window.onresize = function(){ that.timeLoad(); } }; }, unBind:function(){ var that = this; if(typeof that.oldScroll=="function"){ window.onscroll = function(){ that.oldScroll(); }; }else{ window.onscroll = null; }; if(typeof that.oldResize == "function"){ window.onresize = function(){ that.oldResize(); } }else{ window.onresize =null; }; }, timeLoad:function(){ var that = this; lazyLoadImg.timer = setTimeout(function(){ lazyLoadImg.setLoad(); },100); }, setLoad:function(){ var win = tool.getW(),c_h = win.h+win.s,that = this,l=this.imgList.length; if(l<=0){ that.unBind(); }; for(var i = 0;i<l;i++){ var nowImg = this.imgList[i]; if(nowImg.t <= c_h){ nowImg.src = nowImg.getAttribute("_src"); tool.removeClass(nowImg,that.cName); }else{ this.imgList.splice(0,i); break; return ; }; }; } }; //test function showMsg(a){ document.title = a; }; //initlazyLoadImg.init("loadImg");
