前端【1】-图片滚动加载

前面为了赶时间，拷贝了一段滚动加载的效果（http://www.cnblogs.com/Darren_code/archive/2011/07/21/LoadImage.html），结果列表一长，导致页面其他脚本执行非常缓慢，造成很大的性能问题，最后忍无可忍，决定自己重新编码。思路是给列表上每20行编为一个区间，监听页面滚动事件，一旦下一个区间即将可见，加载下一个区间的图片，这样如果不是滚动很快的话，基本上看不到过渡图片的，运行下来，结果让人满意，除了往上滚动等问题没有考虑之外，基本上没有问题了。

var positions = [];//标记位置
var flags = [];//标记是否已经加载
function initialPositions() {
for (var i = 20, len = @(Model.Data.Count); i <= len; i+=20) {
var item = document.getElementById("item" + i);
positions.push(item.getBoundingClientRect().top);
flags.push(false);
}

//判断是否有余数
if(@(Model.Data.Count) % 20 >= 1){
flags.push(false);//增加一个区间
}
}
initialPositions();

window.addEventListener("scroll",function(){
var pos = document.body.scrollTop;

//判断当前区间
for (var i = 0, len=positions.length; i < len; i++) {
if(positions[i] >= pos){
break;
}
}

loadSection(i);
loadSection(i+1);
});

function loadSection(current){
//判断当前区间是否已经加载
if(flags[current] == false){
for (var i = 1; i <= 20; i++) {
var head = document.getElementById("head" + (20*current+i));
if(head){
var attrSrc = head.getAttribute("xsrc");
head.setAttribute("src", attrSrc);
}
}

flags[current] = true;
}
}
loadSection(0);