순수 JS_Image 특수 효과로 구현된 일괄 이미지 미리보기 로딩 기능

1. 구현 원리는 원형으로 회전하는 작은 그림이 필요합니다. 미리 봐야 할 모든 그림의 기본 위치는 스크롤 휠이 원본 위치에 도달할 때입니다. 그림이 나타나야 하며 효과를 얻으려면

코드 복사 코드는 다음과 같습니다.

>

코드 복사 코드는 다음과 같습니다.

var util = {
$: 함수(id) {
return document.getElementById(id)
},
getElementsByClassName: 함수(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: 함수(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); 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는 FF3.x부터 마우스휠을 인식하지 못합니다.
if (document.attachEvent) //if IE(및 사용자 설정에 따라 Opera)
document.attachEvent("on" mousewheelevt, GalleryViewer.orginalImgsAppear);
else if (document.addEventListener) //WC3 브라우저
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: 함수(i, obj) {
this.smallImgs[i].src = obj.src ;
},
orginalImgsAppear: 함수() {
//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 컨테이너와 원본 이미지 주소 배열, 썸네일의 클래스 이름, 썸네일 주소입니다. 자세한 내용은 자신의 프로젝트를 참조하세요. 특정 이미지 주소
})();