非必须不载入图片技术（仿迅雷首页图片被动加载）
技术原理简介：
用户访问页面很多时候，并没有滚动到底部，所以有时候很多图片载入却是浪费了时间
将需要被动加载的图片的src属性用自定义属性写入HTML，src指向一个1像素宽高的占位图片
根据滚动条位置和图片坐标计算判断图片是否出现在可视区域内，如果是，那么加载图片
技术的好处：
1，加快页面载入速度，提高用户体验，首页图片较多的页面尤其明显
2，节省流量和服务器连接数
/**
* Javascript Image Delay load
*
* Javascript实现的页面图片被动加载类，在使用前用1像素图像进行占位
* 并给img tag 添加 自定义bigsrc属性 ，当有图片进入可视区域内时，载入图片
* 提高页面载入速度，节省不必要的流量和连接数
*
* @TODO x轴滚动加载功能未被实现
*/
//闭包防止变量冲突
(function(){
//预定义变量，减小代码体积
var _ = document,
A = _.compatMode,
B = _.body,
C = _.documentElement;
//Constructor
function AimoLoad(e){
//要处理的包含延迟加载图片的容器
this.area = e ? this.get(e) : _;
//需要延迟加载的所有图片对象
this.imgs = [];
//执行判断 条件成立 载入图片
this.run();
}
//扩展原型链（注册类其他方法）
AimoLoad.prototype = {
//获取DOM元素，仅支持ID
'get' : function(e){
return typeof(e)=='string' ? _.getElementById(e) : e;
},
//获取所有需要被动载入的图片集合
'getImages' : function(){
var i = 0,
imgs = this.area.getElementsByTagName('img'),
l = imgs.length;
for ( ; i < l; i++) {
//过滤带有bigsrc属性的所有图片
if(imgs[i].getAttribute('bigsrc')){
this.imgs.push(imgs[i]);
}
}
},
//获取元素位置坐标
'getPosition' : function(el){
var x = 0, y = 0;;
if (el.getBoundingClientRect) {
var box = el.getBoundingClientRect(),
el = (A != "CSS1Compat") ?
_.body : C;
x = box.left + el.scrollLeft - el.clientLeft;
y = box.top + el.scrollTop - el.clientTop;
} else {
x = el.offsetLeft;
y = el.offsetTop;
var parent = el.offsetParent;
while (parent) {
x += parent.offsetLeft;
y += parent.offsetTop;
parent = parent.offsetParent;
}
}
return {'x' : x, 'y' : y};
},
//封装判断变量是否定义
'defined' : function(o){
return (typeof(o)!="undefined");
},
//封装合法化Int变量
'zeroFix' : function(n){
return (!this.defined(n) || isNaN(n))? 0 : n;
},
//获取可视部分高度
'getVisibileHeight' : function(){
var cm = C && (!A || A=="CSS1Compat");
if (!window.opera && cm) {
return C.clientHeight;
}else if (A && !window.opera && B) {
return B.clientHeight;
}
return this.zeroFix(self.innerHeight);
},
//获取垂直滚动条位置
'getScrollTop' : function(){
if (C && this.defined(C.scrollTop) && C.scrollTop>0) {
return C.scrollTop;
}
if (B && this.defined(B.scrollTop)) {
return B.scrollTop;
}
return 0;
},
//执行主函数
'run' : function(){
//获取其他脚本注册到window上的onscroll和onresize事件，避免冲突
var _resize = window.onresize || function(){},
_scroll = window.onscroll || function(){},
//引用自身，另存this指向
_self = this,
//定义注册函数
delayLoad = function(){
//清空前一次获取的所有图片
_self.imgs = [];
//获取当前未载入的图片
_self.getImages();
//如果已经没有被动载入的图片了，那么释放注册的事件，提高性能，节省内存
if(_self.imgs.length==0){
window.onscroll = function(){
_scroll();
};
window.onresize = function(){
_resize();
};
//alert('清除事件');
return;
}
var i = 0,
m = _self.imgs,
l = _self.imgs.length,
y = _self.getVisibileHeight(),
t = _self.getScrollTop();
//遍历所有需要被动载入的图片
for( ; i < l; i++){
//闭包保证i变量
(function(i){
//获取每个图像对象的坐标
var pos = _self.getPosition(m[i]);
//如果图片出现在可视区域内
if(t + y > pos.y){
//读取bigsrc属性，替换当前src属性
m[i].setAttribute('src', m[i].getAttribute('bigsrc'));
//删除bigsrc属性，提高性能
m[i].removeAttribute('bigsrc');
}
})(i);//闭包结束
}//循环结束
};//定义注册函数结束
//注册函数到window scroll事件
window.onscroll = function(){
_scroll();//执行其他脚本注册到当前事件的函数
delayLoad();
};
//注册函数到window resize事件
window.onresize = function(){
_resize();//执行其他脚本注册到当前事件的函数
delayLoad();
};
}
}
//暴露接口到外部，以便调用
window.AimoLoad = AimoLoad;
})();
