Batch image preview loading function implemented in pure JS_Image special effects

1. The implementation principle can be directly seen in the code. A small picture that rotates in a circle is needed. The default position of all pictures that need to be previewed is this small picture. When the scroll wheel reaches the position where the original picture needs to appear, the preview loads and replaces the small picture. To achieve the effect

Copy code The code is as follows:

Copy code The code is as follows:

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
})();