原生Js页面滚动延迟加载图片实现原理及过程_javascript技巧

来源：匠吉游戏

原理和过程
1.页面滚动加载事件
2.获取元素在页面里的top值根据滚动条的位置判断何时显示图片
3.获取元素集合加载过的图片从集合里删除
效果预览：http://jsfiddle.net/dtdxrk/SkYNq/embedded/result/
代码如下:

原生Js页面滚动延迟加载图片

var _CalF = {
$ : function(object){//选择器
if(object === undefined ) return;
var getArr = function(name,tagName,attr){
var tagName = tagName || '*',
eles = document.getElementsByTagName(tagName),
clas = (typeof document.body.style.maxHeight === "undefined") ? "className" : "class";//ie6
attr = attr || clas,
Arr = [];
for(var i=0;iif(eles[i].getAttribute(attr)==name){
Arr.push(eles[i]);
}
}
return Arr;
};
if(object.indexOf('#') === 0){ //#id
return document.getElementById(object.substring(1));
}else if(object.indexOf('.') === 0){ //.class
return getArr(object.substring(1));
}else if(object.match(/=/g)){ //attr=name
return getArr(object.substring(object.search(/=/g)+1),null,object.substring(0,object.search(/=/g)));
}else if(object.match(/./g)){ //tagName.className
return getArr(object.split('.')[1],object.split('.')[0]);
}
},
getPosition : function(obj) { //获取元素在页面里的位置和宽高
var top = 0,
left = 0,
width = obj.offsetWidth,
height = obj.offsetHeight;
while(obj.offsetParent){
top += obj.offsetTop;
left += obj.offsetLeft;
obj = obj.offsetParent;
}
return {"top":top,"left":left,"width":width,"height":height};
}
};

//添加图片list
var _temp = [];
for (var i = 1; i < 21; i ++) {
_temp.push('
图片' + i);
}
_CalF.$("#content").innerHTML = _temp.join("");

var img1 = new scrollLoad("scrollLoading");

显示全文

全部频道

原生Js页面滚动延迟加载图片实现原理及过程_javascript技巧