Batch image preview loading function implemented in pure JS_Image special effects

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: [], //Small image array
orginalImgs: [] , //Original image array
init: function (id, imgs, classname, smallImgSrc) {
this.GalleryContainer = util.$(id);
this.orginalImgs = imgs;
for ( var i = 0; i < imgs.length; i ) { //Append all preview small images
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) {//If the initial preview is loaded directly at the beginning of the page
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]; //Preload large images
if (imagePreload.complete) { //If the image already exists in the browser cache, directly Call the callback function
GalleryViewer.ImgsChange(i, imagePreload);
return; // Return directly without processing the onload event
}
imagePreload.onload = GalleryViewer.ImgsChange(i, imagePreload); //Loading completed replace
})(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");
//The parameter functions are the div.id container and the original image address array , the class name of the thumbnail, the thumbnail address, please refer to your own project for the specific image address
})();