纯JS实现的批量图片预览加载功能

1.实现原理直接见代码,需要一张转圈的小图片,需要预览的所有图片默认的位置全是这张小图片,滚轮滚到原图需要出现的位置时候,预览加载替换小图片.实现效果

<div style="height: 2500px;" id="txtscrolltop">
</div>
<div id="gallerylist">
</div>

var util = {
$: function (id) {
return document.getelementbyid(id);
},
getelementsbyclassname: function (oelm, strtagname, strclassname) {
var arrelements = oelm.getelementsbytagname(strtagname);
var arrreturnelements = new array();
strclassname = strclassname.replace(/-/g, "\-");
var oregexp = new regexp("(^|\\s)" + strclassname + "(\\s|$)");
var oelement;
for (var i = 0; i < arrelements.length; i++) {
oelement = arrelements[i];
if (oregexp.test(oelement.classname)) {
arrreturnelements.push(oelement);
}
}
return arrreturnelements;
},
getxy: function (obj) {
var sumtop = 0, sumleft = 0;
while (obj != document.body) {
sumleft += obj.offsetleft;
sumtop += obj.offsettop;
obj = obj.offsetparent;
}
return { x: sumleft, y: sumtop }
}
};

var galleryviewer = {
gallerycontainer: {},
smallimgs: [], //小图片数组
orginalimgs: [], //原始图片数组
init: function (id, imgs, classname, smallimgsrc) {
this.gallerycontainer = util.$(id);
this.orginalimgs = imgs;
for (var i = 0; i < imgs.length; i++) { //追加所有预览小图片
var img = document.createelement("img");
img.src = smallimgsrc;
img.classname = classname;
this.gallerycontainer.appendchild(img);
}
this.smallimgs = util.getelementsbyclassname(util.$(id), "img", classname);
if (util.getxy(galleryviewer.gallerycontainer).y < window.screen.height) {//如果初始在页面开始部位直接预览加载
this.preloadimages();
}
var mousewheelevt = (/firefox/i.test(navigator.useragent)) ? "dommousescroll" : "mousewheel" //ff doesn't recognize mousewheel as of ff3.x
if (document.attachevent) //if ie (and opera depending on user setting)
document.attachevent("on" + mousewheelevt, galleryviewer.orginalimgsappear);
else if (document.addeventlistener) //wc3 browsers
document.addeventlistener(mousewheelevt, galleryviewer.orginalimgsappear, false);
},
preloadimages: function () {
for (var i = 0; i < galleryviewer.orginalimgs.length; i++) {
(function (i) {
var imagepreload = new image();
imagepreload.src = galleryviewer.orginalimgs[i]; //预加载大图片
if (imagepreload.complete) { // 如果图片已经存在于浏览器缓存，直接调用回调函数
galleryviewer.imgschange(i, imagepreload);
return; // 直接返回，不用再处理onload事件
}
imagepreload.onload = galleryviewer.imgschange(i, imagepreload); //加载完成替换
})(i);
}
},
imgschange: function (i, obj) {
this.smallimgs[i].src = obj.src;
},
orginalimgsappear: function () {
//alert(getxy(this.gallerycontainer).y - window.screen.height);
if (document.documentelement.scrolltop > util.getxy(galleryviewer.gallerycontainer).y - window.screen.height) {
galleryviewer.preloadimages();
}

}
};
(function () {

var imgs1 = ['../content/images/gb_tip_layer.png', '../content/images/gb_tip_layer.png', '../content/images/gb_tip_layer.png'];
galleryviewer.init("div1", imgs1, "smallimgs1", "../content/images/preload.gif");
//参数函数分别为div.id容器,原图地址数组,小图的类名,小图地址,具体图片地址请参照自己的项目
})();